I am building a html5 js ionic mobile app. and short story is I cannot get my canvas to initialize the first image in a sequence on each view load. So each view is a task and each task has a set of images that I cycle through on click... My problem is that I'm trying to show the 1st image in each set before any clicks happen. So a case would be: a user chooses a task, navigates to that view and is presented with a canvas (blank at the moment, well sometimes this behavior miraculous works).
Each time the controller loads, I load the images for that specific task and then call an automatic load of the first image. Alas this is not working...
I have attached a link to show how the method where I believe she is braking -codepen...
$rootScope.getInitialScreen = function () {
I have not included a full example (would be too hectic to code a standalone version) but I have shown how the initial method is called on a loadImages() function, all images load perfectly so that is not where the error is, so I have just put the initialization code up.
Console.logging the image in the initialization function does show the correct image, it simply is not rendering onto my canvas... I've tried sizing of image, position of image, image itself and nothing.. Any ideas I would be super grateful!
Thanks.
Related
In javascript I have a routine where I save gif image from URL to localStorage. On next page reload I check if there is something in localStorage and if YES - I display that gif from localStorage rather than loading it from URL. It works well!
I used this script:
https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/
The problem is that it won't work for animated gifs. The problem is (at least I think so) because on first page load gif is loaded in canvas element which is probably only 2d and one frame therefore gif saved to localStorage is static and not animated. When I read it from localStorage and display it, it will be static.
How could I save animated gif to localStorage and when I load it and display on page it would still be animating?
I was dreaming about a solution tonight. How could I not see it. I should load image1 (when loading the website - means internet is ON) then when I detect no network in javascript, I should simple display this same image1 over all screen (just make it visible) and I don't have to do any assignment which didn't work (image2=image1). Will try to do this today.
i have a problem with carousel image banner slider. In first load my page is looks like this
Looks there are three consecutive images when i load page (those images should be banner slide). But after a moments (less than a second) three images are rendered in proper way. After a moment here is the view of web page
The problem is i want at first load web page i want a state looks like second image. Anyone know the problem ? i had just debugged via chrome debugger and nothing wrong with my javascript, could you give me any clue what is wrong with ?
In my scenario, I'm linking to fairly large images (both in dimensions and filesize). It's understandable that fancybox will have to load for a few seconds before displaying them. The problem is that the loading animation is not showing up, so when the user clicks the thumbnail, it gives the impression that nothing is happening. Fancybox eventually comes up a few seconds later.
There is a secondary issue, also. The images are set to display as a gallery, via the "rel" attribute. Even when the user is viewing one image, browsing to the next takes a while (again, due to filesize), but because the throbber is not showing up, it seems like the prev/next buttons are not working. Any ideas?
I should add that I'm using fancybox v2.
My code (after including the necessary css and scripts for fancybox and the buttons helper, of course): http://pastebin.com/u3g8U8FS
Updating to the latest version (2.0.6) did the trick.
Make sure that the fancybox_loading.gif as well as the fancybox_sprite.png files are in the same folder as the jquery.fancybox.css file
I need to take an action (Call a WEB URL) when an image on a webpage is loaded and is seen by the user (image is not hidden in a scrollable area). If the user scrolls down, and the image gets displayed, then we take the same action.
Is this possible? Using AJAX and Javascript focus? Does focus differentiate between (a) images that are loaded and displayed on screen and (b) images that are loaded but not displayed (because they are still down the scrollable page).
Would really appreciate your help.
Thanks
You can hook into the onload event of the image and the onscroll event on the container.
Use math to see if the images offset is in the viewport (inside the onscroll) and check the images onload - when both criteria are met, you have arrived at your destination.
Look into the following properties: document.body.scrollTop, document.body.clientHeight and image.offsetTop.
Doing a quick calculation using those every time the page scrolls (window.onscroll) should let you know if the image is visible or not.
Maybe this answer could help you:
Get image size when it loads from an extern URL in Javascript
I've got a page with a lot of images (thumbnails). You should be able to expand the images via Lightbox. I need to encourage the browser to load the image in the Lightbox before any other image (thumbnail).
I remember some articles (I can't find anymore) on how to influence the loading mechanism of the browser (use a different subdomain to allow another thread), but I'd like to know whether there might be other options (i.e. without additional subdomains).
To clarify the issue:
Example (how I'd like it to behave)
I visit the page
I click on the 3rd picture thumbnail
The 3rd picture is shown (while the remaining thumbnails are loading)
Example (how it behaves right now)
I visit the page
I click on the 3rd picture thumbnail
A spinning wheel is shown until all thumbnails are loaded
The 3rd picture is shown
Are there any tutorials/papers/views on this issue?
Just did it with using jQuery $('<img>').attr('src', ...) in my custom queue-manager which limits the browser to load images 1-by-1 thus having the capacity to load additional images that might be showing up on the page (like the one in the lightbox).