Pre-loaded images not displaying in Chrome

Question

I am pre-loading some images and then using them in a lightbox. The problem I have is that although the images are loading, they aren\'t being displayed by the browser.

Answer 1

It turns out that Chrome takes into account the HTTP Caching and discards any preloaded images immediately after preload if the Caching is incorrectly set to expire.

In my case I am generating the images dynamically and by default the response was sent to the browser with immediate expiration.

To fix it I had to set the following below:

        Response.Cache.SetExpires(DateTime.Now.AddYears(1));
        Response.Cache.SetCacheability(HttpCacheability.Public);

        return File(jpegStream, "image/jpeg");

Answer 2

Chrome might not be preloading them as it's writing to the DOM with no display, so it might be intelligent enough to realise it doesn't need to be rendered. Try this instead:

var preloaded = new Array();

function preload_images(){
    for (var x = 0; x < preload_images.arguments.length; x++)
    {
        preloaded[x]     = new Image();
        preloaded[x].src = preload_images.arguments[x];
    }
}

The Javascript Image object has a lot of useful functions as well you might find useful:

http://www.javascriptkit.com/jsref/image.shtml

onabort()

Code is executed when user aborts the downloading of the image.

onerror()

Code is executed when an error occurs with the loading of the image (ie: not found). Example(s)

onload()

Code is executed when the image successfully and completely downloads.

And then you also have the complete property which true/false tells you if the image has fully (pre)loaded.