Image preload not working

Question

I wrote (well, copied) a Javascript image preload function and it seems to successfully preload my images when my page loads, but when the page actually needs to display the images, there is a delay during which it apparently loads them again, defeating the purpose of preloading. Possible causes of this behavior and fixes?

I tried but failed to create reproducible code so I guess the cause of this is somewhere in the complexities of my whole project. Here's the image preload function I'm using:

function preload(sources)
{
  var images = [];
  for (i = 0, length = sources.length; i < length; ++i) {
    images[i] = new Image();
    images[i].src = sources[i];
  }
}

I call this on a long array of images stored on our server when the page is loaded, and I can see a long list of "GET" requests in my console that seem to indicate it's indeed preloading the images. Later, when the images are displayed within dynamically generated content (using jQuery if it matters), there is a delay when they are loaded and I see another GET request in the console, with the status "HTTP/1.1 304 Not Modified". So it looks like the images are being loaded again instead of using the cached version. What could be causing this?

I do have some ajax calls occurring after image preload, before image display, with "cache: false" in them - is that a possible cause? However, these ajax calls don't directly affect the page content - they are just used to get database info which in turn affects the page content.

By the way, I am using Firefox for testing. I read somewhere that Chrome at some time would send requests to see whether cached images had been modified but this is supposedly not an issue with Firefox.

nils · Answer 1 · 2014-03-24T20:27:21.000

4

Turn off Firebug and your images will not be loaded twice. If you have firebug turned on your preloaded image will not being cached.

You can verify this behaviour with a proxy like Charles

edited Mar 24 '14 at 20:27

answered Mar 24 '14 at 16:06

nils

1,668
14
15

3

Thanks for this comment. I don't think this is my issue because I am not using Firebug. Also, I think I'm having the same or a related issue on Chrome - definitely the images are still loading slowly so it seems like the preload isn't working, although on Chrome I do not see the GET requests in the console. Thanks again though, it's good to know. – baixiwei Mar 24 '14 at 19:30
Thx; this was my issue. Also when preloading with Ajax, Firefox still makes a second http-request. So css background is better for image preloading. – bodo Apr 24 '15 at 15:00
@baixiwei describes my issue exactly. I'm using chrome dev tools, but when I turned it off and monitored network traffic using Wireshark I found the exact same behaviour (GET to the image that already got loaded with a GET). I don't think this problem is caused by devtools/firebug. – Andy Smith Apr 09 '16 at 10:48

score 0 · Answer 2 · answered Dec 13 '14 at 01:36

I just figured out a way around this issue that seems to be working.

Instead of creating a new image via Javascript then assigning it's src, you can define an element in css with the background image you want pre-loaded then dynamically append that element to the body like so:

CSS:

#preload {
    background: url('/image.jpeg') no-repeat -9999px -9999px;
}

Javascript (I've used jQuery for simplicity):

jQuery(window).load(function() {
    jQuery('body').append('<div id="preload"></div>');
});

Hopefully that helps.

And what if you want to add images dynamically from a database? like a image slider, where you need to pre load the images, but will be adding images along the way which automatically are added to the slider... ? — ii iml0sto1, Jul 06 '18 at 17:56

Image preload not working

2 Answers2