Preloading images with jQuery

Question

I'm looking for a quick and easy way to preload images with JavaScript. I'm using jQuery if that's important.

I saw this here (http://nettuts.com...):

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

But, it looks a bit over-the-top for what I want!

I know there are jQuery plugins out there that do this but they all seem a bit big (in size); I just need a quick, easy and short way of preloading images!

Youngyoungblood

$.each(arguments,function(){(new Image).src=this}); – Emoryemote

Answer 1

Quick and easy:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Or, if you want a jQuery plugin:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Exhalant

Howcome this code doesn't work for me? Does it work for others? – Indistinct

Doesn't the image element need to be inserted into the DOM to ensure the browser caches it? – Blockade

@Blockade It does load them into the DOM at $('<img />') – Lemos

I believe $('<img />') just creates an image element in memory (see link). It looks like '$('<img src="' + this + '" />') would actually create the element within a hidden DIV, because it is more "complicated". However, I don't think this is needed for most browsers. – Blockade

But how do you detect when all of that preloading has completed? – Niobic

@Niobic You don't have to detect it. Preloading is so the images are already loaded before they're shown. For example, a div with a background image that changes on hover. If you don't preload it, it has to load when you hover and it flashes a bit which isn't that nice. That's the purpose of preloading. But there is probably a way to detect when its all done. – Stepson

Another way is to load using standard HTML. Something like this: <div style="display: none;"><img src="image1.jpg"/><img src="image2.jpg"/>...</div>. Not 100% sure but I think that the body onload event gets called after all the images were loaded. – Hollander

That is a weird way of writing a jQuery plugin. Why not $.preload(['img1.jpg', 'img2.jpg']) ? – Scoter

This seemed to work for a short while for me in Opera. When I actually inserted the images (hidden) into the DOM, it worked fine. – Ibbetson

Make sure to call this inside $(window).load(function(){/*preload here*/}); because that way all images in the document are loaded first, it's likely that they are needed first. – Cymar

Based on the following jsfiddle experiment I just did, this answer is perfectly valid. The load event will fire for the image even though it was not added to the document... However, you might also want to include a function that executes on the load event so you can do something with your images after they have loaded. jsfiddle.net/2cgFp/6 – Berkow

I guess internally $('<img/>') uses (new Image()) so why present it as the alternative? is there a situation where it will not work? – Enrika

FYI: $(document.createElement('img')) though more verbose, is slightly faster than $('<img/>') because jQuery doesn't have to parse the string and figure out whether it's a selector or an element to create. – Trexler

@Niobic - You can detect that it's done preloading like this... $('<img/>').attr('src', this).load(function() { /* it's loaded! */ }); – Pevzner

@RegionalC - It may be a little safer to set the load event before setting the src just in case the image finishes loading before the load event is set? $('<img/>').load(function() { /* it's loaded! */ }).attr('src', this); – Primaveria

If anyone else cares, using <img/> inside <script> will produce az invalid XHTML code. To avoid this, bracket your code between /* <![CDATA[ */ and /* ]]> */. Now this makes it fully valid with XHTML/Transitional. – Skylar

It's better not to use this but rather have (ind, src) parameters to the callback because this will lead to wrapping scalar values (e.g. strings) into objects, here is a piece from the JQuery documentation: The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value. – Greataunt

@Greataunt that doesn't make difference, since in JavaScript a string or a number is an object either way, e.g. 'foo'.length will yell 3. – Kowalski

Is there a way to do this with some delay? I am currently running into the problem that it is loading all these big images before the small more important images on my html are loaded (the ones I assigned via javascript) – Crifasi

@user3525295 Have you tried wrapping the preloading call (the usage, not the function) into jQuery's document ready function? – Privation

what about using link element as mentioned here ? – Execute

@Crifasi I could be wrong here, but doesn't the order specified determine what gets loaded first? Can't you just specify that it load the smaller ones first? – Ragtime

Is there any way to load images synchronously in order while preloading in this function? – Feel

As of 2019, $(window).on('load', function(){/*preload here*/}); – Polecat

And how can I use these images? I mean, where is the handle? – Barnstorm

Answer 2

Here's a tweaked version of the first response that actually loads the images into DOM and hides it by default.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Unexceptional

hide() is more terse than css('display', 'none'). – Scoter

What's the advantage of inserting them into the DOM? – Scoter

I also would like to know the advantage of inserting them into the DOM. – Diadiabase

From my experience, preloading an image into the DOM makes the browser aware of its existence and for it to be properly cached. Otherwise, the image only exists in memory which only works for single page apps. – Unexceptional

Dennis Rongo. Appending images to the DOM fixed random re-loading on Chrome. Thanks! – Waterside

Is there a way to do this with some delay? I am currently running into the problem that it is loading all these big images before the small more important images on my html are loaded (the ones I assigned via javascript) – Crifasi

Answer 3

Use JavaScript Image object.

This function allows you to trigger a callback upon loading all pictures. However, note that it will never trigger a callback if at least one resource is not loaded. This can be easily fixed by implementing onerror callback and incrementing loaded value or handling the error.

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

Kowalski

Do the right thing, use JavaScript Image object. did you observe people doing the wrong thing in these answers? – Scoter

Brilliant code. Am I correct in thinking that this will fire the onload event even if the image is cached? (Because img.onload is declared first). This is what my tests showed. – Carmelitacarmelite

@Scoter potentially, yeah. If the goal is to pre-load (which suggests an order of performance) then I'd prefer to see a raw JS option instead of jQuery dependent options. – Deflate

I loved this solution but I just discovered that it doesn't work in my Firefox. Is it just me or are others having the same issue? – Stool

@Stool give more details. How do you define "not working"? What is the FF version? – Kowalski

Sorry Gajus, just nothing happens. I get no error and the onload code does not get called. I'm running FF 31.0. I think it might be my implementation of it and will report back once I fix it. – Stool

@Stool Add the onabort, onerror callbacks. See if either is triggered. – Kowalski

Have a look at a more complete example using the same technique, fragged.org/…. – Kowalski

The onerror gets called but I can't seem to get the error message from the message parameter. For now I just decrement the counter and do a check to see if it was the last image before calling the callback. Thanks for the help! – Stool

Great answer, but isn't this creating 3 functions on every loop iteration? Maybe predefine a single onload that can be reused for each image? Same for onerror and onabort. – Previse

This was perfect for me (albeit I was only using one image). I used this to swap a low-quality background-image for a high-quality one. The ability to know when the image had loaded was perfect, and notably absent from the other higher-rated answers! – Boarder

@Boarder This does not sound like a valid use case, though. Have you thought of using progressive loading? See "compression" section of this article, en.wikipedia.org/wiki/JPEG – Kowalski

In the case of UI driven interface (as opposed to content), the usual use case is to prevent user from viewing the page before all the necessary images are loaded, e.g. game loading screen. – Kowalski

Why are you wrapping for body within an anonymous function? – Nicolella

@Nicolella It is an IIFE used to create a new scope. – Kowalski

Ah, I see. Thought there is maybe other reason. From performance point of view I would think this is not a good practice.. – Nicolella

From a performance point of view, there is no measurable difference. You can however use a predefined function if you want (and you should for readability purposes). – Kowalski

Thanks @GajusKuizinas. – Nicolella

Answer 4

JP, After checking your solution, I was still having issues in Firefox where it wouldn't preload the images before moving along with loading the page. I discovered this by putting some sleep(5) in my server side script. I implemented the following solution based off yours which seems to solve this.

Basically I added a callback to your jQuery preload plugin, so that it gets called after all the images are properly loaded.

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

Out of interest, in my context, I'm using this as follows:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

Hopefully this helps someone who comes to this page from Google (as I did) looking for a solution to preloading images on Ajax calls.

Thurman

For those that are not interested in messing up the Array.prototype, instead, you can do: checklist = this.length And in the onload function: checklist-- Then: if (checklist == 0) callback(); – Bailiwick

Everything would be fine however adding new or removing existing methods to an object you don't own is one of the worst practices in JavaScript. – Hew

Nice and quick, but this code will never fire the callback if one of the images is broken or unable to load. – Bendick

.attr({ src: this }).load(function() {...}) should be .load(function() {...}).attr({ src: this }) otherwise you will have caching problems. – Adur

Answer 5

This one line jQuery code creates (and loads) a DOM element img without showing it:

$('<img src="img/1.jpg"/>');

Sternberg

@huzzah - You may be better off just using sprites. Less http requests. :) – Pevzner

Answer 6

$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

The usage is quite simple:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

Microscopium

This is a really good answer, it really should be the top voted answer imho. – Sisneros

Some explaining words would have been nice. – Shelves

Good answer, but I suggest using picsum.photos instead of lorempixel.com – Perzan

Answer 7

I have a small plugin that handles this.

It's called waitForImages and it can handle img elements or any element with a reference to an image in the CSS, e.g. div { background: url(img.png) }.

If you simply wanted to load all images, including ones referenced in the CSS, here is how you would do it :)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

Scoter

Does this plugin cause images that haven't appeared on the page yet to be loaded, or only attach events to images which were already going to be loaded? – Gavriella

@DaveCameron It doesn't respect if the images are visible or not. You could easily fork it and make that change - just add :visible to the custom selector. – Scoter

This plugin looks very interesting. However, the jquery documentation highlights that the load event, when applied to images: "doesn't work consistently nor reliably cross-browser". How has the plugin managed to get around that? – Zymosis

@Zymosis Check the source with regard to the custom selector. – Scoter

@Scoter How does this plugin load images that are set in the css on :hover of an element? It does not work for me – Mailer

@muffls The documentation never claims to do this. – Scoter

Answer 8

this jquery imageLoader plugin is just 1.39kb

usage:

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

there are also other options like whether you want to load the images synchronously or asychronously and a complete event for each individual image.

Twickenham

@Ian because the document is already ready by the time the callback is fired. $(document).ready is used to make sure your DOM is loaded. When it comes to the callback, that mean that all images are loaded which means that yoru DOM is loaded so no need for document.ready inside a callback. – Sparid

@AamirAfridi There is no guarantee that the document is ready in the callback...where are you inferring that from? There's nothing on the plugin's page that says the allcomplete callback is executed after the DOM is ready. There's a pretty good chance that the images finish loading after the DOM is ready, but there's no reason to assume. I don't know why you think callbacks are magical and are executed after the DOM is ready...can you explain where you're getting that from? Just because the images are loaded doesn't mean the DOM is ready – Copolymerize

@AamirAfridi And the documentation for the plugin even says: NB to use this as an image preloader simply put your $(document).ready(function(){}); into your 'allcomplete' event : > simples! ... it directly recommends what this answer shows. – Copolymerize

@Copolymerize its always wise to call your plugin(s) inside $(document).ready to avoid all this. – Sparid

@AamirAfridi That makes no sense for this situation. The plugin is a pre loader. You want to execute it as soon as possible. And there are plenty of things that don't depend on the DOM that you want to fire as soon as possible, and then when the DOM is ready, do something. – Copolymerize

The link in this answer is dead now. – Glairy

Answer 9

you can load images in your html somewhere using css display:none; rule, then show them when you want with js or jquery

don't use js or jquery functions to preload is just a css rule Vs many lines of js to be executed

example: Html

<img src="someimg.png" class="hide" alt=""/>

Css:

.hide{
display:none;
}

jQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

Preloading images by jquery/javascript is not good cause images takes few milliseconds to load in page + you have milliseconds for the script to be parsed and executed, expecially then if they are big images, so hiding them in hml is better also for performance, cause image is really preloaded without beeing visible at all, until you show that!

Cherisecherish

More info on this approach can be found here: perishablepress.com/… – Hackler

But you need to be aware that this technique has a major drawback: your page will not be completely loaded until all images are loaded. Depending on the number of images to preload and their size, this could take some time. Even worse, if the <img> tag does not specify a height and width some browsers might wait until the image is fetched before rendering the rest of the page. – Amalekite

@Alex you anyway need to load the img, you are free to choose if to load them with html and avoid any kind of blinking and half loaded images , or if you want to get more speed going for a not stable solution – Cherisecherish

also i really think creating html tags with javascript is unreadable at all just my 2 cents – Cherisecherish

I needed a very quick solution for a very complex project and this was it. – Maskanonge

For UX purposes, I use many hidden images . So, in this case, this solution would not fit ! – Carline

Answer 10

A quick, plugin-free way to preload images in jQuery and get a callback function is to create multiple img tags at once and count the responses, e.g.

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

Note that if you want to support IE7, you'll need to use this slightly less pretty version (Which also works in other browsers):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

Jobholder

Answer 11

Thanks for this! I'd liek to add a little riff on the J-P's answer - I don't know if this will help anyone, but this way you don't have to create an array of images, and you can preload all your large images if you name your thumbs correctly. This is handy because I have someone who is writing all the pages in html, and it ensures one less step for them to do - eliminating the need to create the image array, and another step where things could get screwed up.

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

Basically, for each image on the page it grabs the src of each image, if it matches certain criteria (is a thumb, or home page image) it changes the name(a basic string replace in the image src), then loads the images.

In my case the page was full of thumb images all named something like image_th.jpg, and all the corresponding large images are named image_lg.jpg. The thumb to large just replaces the _th.jpg with _lg.jpg and then preloads all the large images.

Hope this helps someone.

Hooks

Answer 12

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

Geophilous

Welcome to Stack Overflow! Rather than only post a block of code, please explain why this code solves the problem posed. Without an explanation, this is not an answer. – Gurule

Answer 13

I use the following code:

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

Handicraftsman

Bind to the load event first, then set the src. – Adur

Answer 14

I would use an Manifest file to tell (modern) web browsers to also load all relevant images and cache them. Use Grunt and grunt-manifest to do this automatically and never worry again about preload scripts, cache invalidators, CDN etc.

https://github.com/gunta/grunt-manifest

Iz

Answer 15

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

.attr('src',value) not .attr('src',this)

just to point it out :)

Intumesce

Scope this inside the callback that is passed to $.each is assigned to the value that is being iterated. – Striper

? $(['img1.jpg','img2.jpg','img3.jpg']).each(function (index,value) { console.log(value);//img1.jpg console.log(this);//String { 0="i", 1="m", 2="g", more...} $('<img />').attr('src',this).appendTo('body').css('display','none'); }); – Intumesce

Hm. I guess you are right here. For example $("div").each(function(i, el){ console.log(el == this);}); generates all trues; Iteration over array seems to behave differently. – Striper

Answer 16

This works for me even in IE9:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Orchid

This will fail eventually due to caching, always bind the load event before setting the src attribute. – Adur

Answer 17

I wanted to do this with a Google Maps API custom overlay. Their sample code simply uses JS to insert IMG elements and the image placeholder box is displayed until the image is loaded. I found an answer here that worked for me : https://mcmap.net/q/64676/-load-image-with-jquery-and-append-it-to-the-dom .

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

This preloads an image as suggested before, and then uses the handler to append the img object after the img URL is loaded. jQuery's documentation warns that cached images don't work well with this eventing/handler code, but it's working for me in FireFox and Chrome, and I don't have to worry about IE.

Expellee

This won't work well with cached images as you've found out. the workaround is to bind the load event first, then set the src attribute. – Adur

Answer 18

I usually use this snippet of code on my projects for the loading of the images in a page. You can see the result here https://jsfiddle.net/ftor34ey/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<img src="https://live.staticflickr.com/65535/50020763321_d61d49e505_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50021019427_692a8167e9_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020228418_d730efe386_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020230828_7ef175d07c_k_d.jpg" width="100" />

<div style="background-image: url(https://live.staticflickr.com/65535/50020765826_e8da0aacca_k_d.jpg);"></div>
<style>
    .bg {
        background-image: url("https://live.staticflickr.com/65535/50020765651_af0962c22e_k_d.jpg");
    }
</style>
<div class="bg"></div>

<div id="loadingProgress"></div>

The script save in an array all the src and background-image of the page and load all of them.

You can see/read/show the progress of the loading by the var loadCount.

let backgroundImageArray = [];

function backgroundLoading(i) {

    let loadCount = 0;

    let img = new Image();
    $(img).on('load', function () {

        if (i < backgroundImageArray.length) {

            loadCount = parseInt(((100 / backgroundImageArray.length) * i));
            backgroundLoading(i + 1);

        } else {

            loadCount = 100;
            // do something when the page finished to load all the images
            console.log('loading completed!!!');
            $('#loadingProgress').append('<div>loading completed!!!</div>');

        }

        console.log(loadCount + '%');
        $('#loadingProgress').append('<div>' + loadCount + '%</div>');

    }).attr('src', backgroundImageArray[i - 1]);

}

$(document).ready(function () {

    $('*').each(function () {

        var backgroundImage = $(this).css('background-image');
        var putInArray = false;

        var check = backgroundImage.substr(0, 3);

        if (check == 'url') {

            backgroundImage = backgroundImage.split('url(').join('').split(')').join('');
            backgroundImage = backgroundImage.replace('"', '');
            backgroundImage = backgroundImage.replace('"', '');

            if (backgroundImage.substr(0, 4) == 'http') {
                backgroundImage = backgroundImage;
            }
            putInArray = true;

        } else if ($(this).get(0).tagName == 'IMG') {

            backgroundImage = $(this).attr('src');
            putInArray = true;

        }

        if (putInArray) {
            backgroundImageArray[backgroundImageArray.length] = backgroundImage;
        }

    });

    backgroundLoading(1);

});

Cocker

Answer 19

5 lines in coffeescript

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

Decollate

Can you expand on how solution works to resolve the question in the OP? And possibly comment your code so others can more easily understand it? – Quarry

Answer 20

For those who know a little bit of actionscript, you can check for flash player, with minimal effort, and make a flash preloader, that you can also export to html5/Javascript/Jquery. To use if the flash player is not detected, check examples on how to do this with the youtube role back to html5 player:) And create your own. I do not have the details, becouse i have not started yet, if i dont forgot, i wil post it later and will try out some standerd Jquery code to mine.

Tradescantia

This is not a solution. Browser don't support Flash player by default. It can be easily achieve with JavaScript which is the native browser language. – Postmistress

I remember the Flash haters from 2012... it was not normal... everywhere i went i was attacked when i even used the word Flash. – Tradescantia