I'm dynamically switching background images. Naturally, they need to be preloaded to display promptly. I am preloading them, am able to following in FireBug as the images load. When the background image switches, I see the images download again in FireBug.
Here's my url: http://www.morganpackard.com/siteRoot/
Strangely, if I reload the page, everything works as expected. The steps I'm taking are as follows:
1) clear FireFox cache
2) reload page
Images load slowly, and, apparently are neither being preloaded nor cached. Every time there's an image swap, the image downloads again.
3) now reload the page again without clearing the cache
Images load and swap instantly, everything works as expected.
So it looks like I'm having to RELOAD before FireFox will read images from the cache. This is kooky. Any ideas?
Note: My images are ENORMOUS. I'll compress them, of course, but want to get this preloading this sorted first.
I didn't read your code, but for preloading to work, you must add the image to the document DOM, otherwise it can be garbage collected aggressively.
Checking with HttpFox, I am not seeing further http requests - when clicking around - for your background images after the initial load. If I hit "refresh" then the images are reloaded. I think this is correct and what you'd expect. However be aware that reloading of a page and its assets like images, css etc on a page refresh is dependent on both response headers and any over-rides for these specified in your browser/plugin tools. Take a look at pragma: no-cache and W3C Cache-Control (Section 14.9)
Edit: With firebug on, I am seeing reloads when I click around. This is presumably an artefact of Firebug. Turn off firebug and you wont have the reloads.
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 two pages and after the first page loads, I use javascript image object like this:
var workshopBack = new Image();
workshopBack.src = "/images/wBack.jpg";
The wBack.jpg is the background for the next page, but it is huge, so I load it before in the first page itself. Now my question, when the user navigates to the next page, will the background be loaded from cache or will it be downloaded it again?
Normally loading an image will keep it in the cache for a while, but there are no guarantees.
There is no standard for how the browser cache should work, it's just implemented as best the browser vendor knows. It's entirely possible that some browsers have an implementation that will drop the image as soon as possible, because of its size. You just have to test in different browsers to see how they react.
Also, the state of the cache may also affect the result. Even if your browser keeps the image, some other user may have a different set of files in the cache, or a different cache limitation, that makes the browser drop the image. You can only make sure that it works in most cases, there is never a guarantee that it will work in all cases.
Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.
For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.
I am developing a site, and I have to set the src of the not found images, to an error image.
the methods .load() and .error() works always except in IE.
I have been searching, and I have found this:
Issue with IE not calling JQuery .load() function on page refresh - traced to image caching
Adding the query string to the image, always loads it from server, and .load() and .error() methods works properly, however the site is quite too big, and I really can't load all images in site every time from server, without loading it from cache.
Any ideas of how make work this methods, without load from server every time the images for IE, or other way to check if image has been loaded correctly or not that work in IE?
Thanks in advance
This is a very old bug that actually was fixed in all modern browsers except IE.
They didn't trigger onload event if image was obtained from cache.
But there is a workaround that is well-known by every person who tried to create an image gallery in javascript a couple of years ago:)
Image DOM element has a property .complete that indicates whether image was loaded or not. You can check this property on script load. If image is in the cache img.complete will return true right after page loaded:
$('img').each(function(){
//this code will not run in IE if image is in the cache
$(this).on('load', function(){
checkImage(this);
});
//this code will run if image is already in the cache
if (this.complete) checkImage(this);
});
function checkImage(){
//your code for checking image
}
Do you have access to the server? A better method may be using .htaccess to rewrite all requests for images to a PHP script, and then if the image is not found, serve the image not found image
I have a web app which displays a Java Script image carousel.
Showing one image at a time for n seconds.
When the html page (index.html) loads it loads all n images in an hidden parent html DIV and the app (JavaScript) is responsible for showing and hiding the parent divs for the images at a given interval.
This usually works fine, but some times (randomly) only half of the image is loaded (eg. just half of the image is displayed on the screen).
Sometimes only "half" of the index.html response is loaded making the HTML kode to bleed out to the display.
Unfortunatly I do not have any tools like Firebug etc. to debug the problem yet since the screen is a kiosk (screen hanging on the wall)
To me this seems like a network problem but I am no network administrator so I will just be guessing here.
As I said this happens randomly.
The image starts loading but only half of the image. Sometimes after maybe 15 seconds the rest of the image is suddenly displayed.
If this could be a network problem the what could it be?
Best regards,
bob
Sounds like it could be a network issue. Why not try and cache the images on the browser so you don't have to wait for them to load every time. Also try looking in the Firebug/Web Inspector Net panel and you should be able to see if the browser is waiting on a network response or not.