By Simon_Weaver


2009-02-13 06:56:25 8 Comments

In jQuery when you do this:

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

It waits for the DOM to load and executes your code. If all the images are not loaded then it still executes the code. This is obviously what we want if we're initializing any DOM stuff such as showing or hiding elements or attaching events.

Let's say though that I want some animation and I don't want it running until all the images are loaded. Is there an official way in jQuery to do this?

The best way I have is to use <body onload="finished()">, but I don't really want to do that unless I have to.

Note: There is a bug in jQuery 1.3.1 in Internet Explorer which actually does wait for all images to load before executing code inside $function() { }. So if you're using that platform you'll get the behavior I'm looking for instead of the correct behavior described above.

10 comments

@Mariusz Charczuk 2016-06-29 11:34:52

My solution is similar to molokoloco. Written as jQuery function:

$.fn.waitForImages = function (callback) {
    var $img = $('img', this),
        totalImg = $img.length;

    var waitImgLoad = function () {
        totalImg--;
        if (!totalImg) {
            callback();
        }
    };

    $img.each(function () {
        if (this.complete) { 
            waitImgLoad();
        }
    })

    $img.load(waitImgLoad)
        .error(waitImgLoad);
};

example:

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>

@molokoloco 2014-06-02 19:36:31

With jQuery i come with this...

$(function() {
    var $img = $('img'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) alert("Images loaded!");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

Demo : http://jsfiddle.net/molokoloco/NWjDb/

@JohnyFree 2015-09-10 20:28:07

I found out that this won't work properly if browser returns 304 Not Mofified response for image meaning that the image is cached.

@Coz 2016-10-23 21:17:19

None of the answers so far have given what seems to be the simplest solution.

$('#image_id').load(
  function () {
    //code here
});

@Top Cat 2018-02-14 12:34:57

What's nice about this is that you can get it to trigger for individual images as soon as they load.

@paxdiablo 2009-02-13 07:03:14

With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).on("load", handler) to execute something when all other things are loaded as well, such as the images.

The difference can be seen in the following complete HTML file, provided you have a jollyroger JPEG files (or other suitable ones):

<html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        // : 100 copies of this
        <img src="jollyroger99.jpg">
    </body>
</html>

With that, the alert box appears before the images are loaded, because the DOM is ready at that point. If you then change:

$(document).ready(function() {

into:

$(window).on("load", function() {

then the alert box doesn't appear until after the images are loaded.

Hence, to wait until the entire page is ready, you could use something like:

$(window).on("load", function() {
    // weave your magic here.
});

@Paolo Bergantino 2009-02-13 07:05:11

smacks forehead +1 totally forgot that. $(window).load() won't fire until images are done.

@Simon_Weaver 2009-02-13 07:12:38

thanks! that did it. i didn't actually notice how bad the effect was until i tested locally in Safari on Windows. then it became painfully obvious that i needed to do this. smacks forehead

@Simon_Weaver 2009-02-13 07:13:35

except you don't need the waiting thing. just put the logic in load(..). is that what you meant by 'smacks forehead'?

@Paolo Bergantino 2009-02-13 07:25:45

Nah, I just smacked my forehead because of the answer. he initially didn't have the waiting stuff.

@eyelidlessness 2009-02-13 08:33:00

Just so you know, Safari sometimes fires onload before images have completely loaded. I can't reproduce it reliably but it does happen.

@Simon_Weaver 2009-02-13 09:10:36

@eyelidlessness - so is that going to also affect $(window).load or just body.onload ?

@user423488 2010-08-18 01:31:29

I just want you to know, that this tip rocks. I was having a problem with a picture slider that fades out an image (#current_pic), then changes the src, then fades the same #current_pic back in. The browser kept trying to show the image before it loaded --> and not fading. Then I used: $("#current_pic").load(function{ $("#current_pic").fadeIn('slow'); }); and the browser waits until loading and the slick fadeIn action works. Thanks!

@Rimian 2010-09-17 05:57:40

I've done the same. Even, read through an answer not knowing it was me and still not understanding it.

@Nathan Crause 2012-03-02 22:00:00

Just a note - this doesn't seem to work under Chromium (and I presume Chrome). The $(window).ready event seems to fire the same as $(document).ready - prior to images being completed.

@TJ- 2012-12-27 20:22:48

but it's $(window).load(function())

@Flimzy 2013-12-11 20:04:18

$(window).load(), $(window).ready() and $(document).ready() are all firing for me before images load in Chromium.

@KyorCode 2014-02-14 14:39:53

$(window).load(), $(window).ready() and $(document).ready() all fail for me in IE11. They fire before images set through css are loaded.

@Matt Ramirez 2014-03-14 14:29:05

try $(window).on("load",function(){

@Jamie Barker 2014-05-19 15:01:51

@KyorCode Are you sure it's not just because the images in IE were cached? If that happens, they won't fire a "load" event at all. This article helps to get around this issue.

@user3638471 2017-01-11 11:11:16

@TJ- fixed that

@Mario Medrano 2016-04-01 19:25:31

This way you can execute an action when all images inside body or any other container (that depends of your selection) are loaded. PURE JQUERY, no pluggins needed.

var counter = 0;
var size = $('img').length;

$("img").load(function() { // many or just one image(w) inside body or any other container
    counter += 1;
    counter === size && $('body').css('background-color', '#fffaaa'); // any action
}).each(function() {
  this.complete && $(this).load();        
});

@alex 2011-03-02 05:45:13

I wrote a plugin that can fire callbacks when images have loaded in elements, or fire once per image loaded.

It is similar to $(window).load(function() { .. }), except it lets you define any selector to check. If you only want to know when all images in #content (for example) have loaded, this is the plugin for you.

It also supports loading of images referenced in the CSS, such as background-image, list-style-image, etc.

waitForImages jQuery plugin

Example Usage

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});

Example on jsFiddle.

More documentation is available on the GitHub page.

@Fraxtil 2011-09-30 22:31:30

Thank you!! $.load() wasn't working for me, but this does the trick perfectly.

@basZero 2012-11-01 16:14:59

I use Chrome Version 22.0.1229.94 and this plugin, and I tried to read the offsets from the loaded images within the waitFormImages: ('img selector').each(function(index) { var offset = $(this).offset(); ...}); , however, offset.top is still zero. Why?

@alex 2012-11-01 20:47:57

@basZero Difficult to tell without more context. Please raise an issue on the Issues page.

@Mandeep Jain 2013-01-29 05:50:53

Its not working for me when the images are cahced. Does any1 hav a workaround for this ?

@alex 2013-04-02 22:59:53

@MandeepJain Open an issue with a minimal test case.

@cr8ivecodesmith 2013-06-06 11:37:47

This library helped me a lot and should have been part of jquery. Heck even .load() has a caveat api.jquery.com/load

@Batist 2016-02-19 08:34:11

Could you update the jsFiddle? (It's not working anymore due to github not being a CDN)

@Fabian Schöner 2016-07-13 11:15:13

Its basically analog to imagesLoaded but it works with srcsets too. Exactly what i was looking for! Great plugin!

@hyankov 2010-02-22 15:13:44

$(window).load() will work only the first time the page is loaded. If you are doing dynamic stuff (example: click button, wait for some new images to load), this won't work. To achieve that, you can use my plugin:

Demo

Download

/**
 *  Plugin which is applied on a list of img objects and calls
 *  the specified callback function, only when all of them are loaded (or errored).
 *  @author:  H. Yankov (hristo.yankov at gmail dot com)
 *  @version: 1.0.0 (Feb/22/2010)
 *  http://yankov.us
 */

(function($) {
$.fn.batchImageLoad = function(options) {
    var images = $(this);
    var originalTotalImagesCount = images.size();
    var totalImagesCount = originalTotalImagesCount;
    var elementsLoaded = 0;

    // Init
    $.fn.batchImageLoad.defaults = {
        loadingCompleteCallback: null, 
        imageLoadedCallback: null
    }
    var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);

    // Start
    images.each(function() {
        // The image has already been loaded (cached)
        if ($(this)[0].complete) {
            totalImagesCount--;
            if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
        // The image is loading, so attach the listener
        } else {
            $(this).load(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // An image has been loaded
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
            $(this).error(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // The image has errored
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
        }
    });

    // There are no unloaded images
    if (totalImagesCount <= 0)
        if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);

@Jonathan Marzullo 2013-08-26 23:29:38

just in case anybody needs a usage example to the BatchImagesLoad plugin: yankov.us/batchImageLoad

@Adrien Be 2014-11-13 17:00:21

I mean no disrespect but one cannot rely "just" on your word regarding the reliability of your plugin. As mentioned in Yevgeniy Afanasyev's answer, imagesLoaded does a much better job at this & cover the use case you mentioned along with many other corner cases (see the solved github issues).

@Dan Passaro 2012-07-26 20:18:46

For those who want to be notified of download completion of a single image that gets requested after $(window).load fires, you can use the image element's load event.

e.g.:

// create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");

// get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

// wait for the image to load 
$imgElement.load(function() {
    alert("The image has loaded; width: " + $imgElement.width() + "px");
});

@Yevgeniy Afanasyev 2014-10-20 03:52:53

Use imagesLoaded PACKAGED v3.1.8 (6.8 Kb when minimized). It is relatively old (since 2010) but still active project.

You can find it on github: https://github.com/desandro/imagesloaded

Their official site: http://imagesloaded.desandro.com/

Why it is better than using:

$(window).load() 

Because you may want to load images dynamically, like this: jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});

@Adrien Be 2014-11-19 08:01:16

Actually, imagesloaded does not support the change of src attribute value cross browser. You must create a new image element each time. Try it on Firefox and you will see the issue appearing.

@Yevgeniy Afanasyev 2014-11-19 23:32:29

Good point, I've only tested on Google chrome and IE-11 yet. It was working. Thanks.

@Adrien Be 2014-11-20 09:59:53

I did add this cross-browser issue in my question stackoverflow.com/q/26927575 in the point "What you cannot do with imagesloaded", see the imagesLoaded relevant issue on Github github.com/desandro/imagesloaded/issues/121

@Adrien Be 2014-11-14 13:15:40

I would recommend using imagesLoaded.js javascript library.

Why not use jQuery's $(window).load()?

As ansered on https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

It's a matter of scope. imagesLoaded allows you target a set of images, whereas $(window).load() targets all assets — including all images, objects, .js and .css files, and even iframes. Most likely, imagesLoaded will trigger sooner than $(window).load() because it is targeting a smaller set of assets.

Other good reasons to use imagesloaded

  • officially supported by IE8+
  • license: MIT License
  • dependencies: none
  • weight (minified & gzipped) : 7kb minified (light!)
  • download builder (helps to cut weight) : no need, already tiny
  • on Github : YES
  • community & contributors : pretty big, 4000+ members, although only 13 contributors
  • history & contributions : stable as relatively old (since 2010) but still active project

Resources

Related Questions

Sponsored Content

20 Answered Questions

[SOLVED] Wait until all jQuery Ajax requests are done?

14 Answered Questions

[SOLVED] How can I create a "Please Wait, Loading..." animation using jQuery?

  • 2009-12-27 01:10:29
  • thedp
  • 1025876 View
  • 577 Score
  • 14 Answer
  • Tags:   jquery animation

6 Answered Questions

[SOLVED] Wait for images to load and then execute all other code

2 Answered Questions

[SOLVED] Execute code after all images are loaded

3 Answered Questions

[SOLVED] More efficient way to wait for all images to load in jQuery

2 Answered Questions

[SOLVED] jQuery wait till AJAX page is fully loaded

4 Answered Questions

[SOLVED] When All images loaded, execute a code

  • 2011-07-08 13:09:01
  • user695763
  • 1279 View
  • 0 Score
  • 4 Answer
  • Tags:   javascript jquery

1 Answered Questions

wait for all image to load jquery ajax / jquery pjax

  • 2011-06-18 03:10:17
  • Adam Ramadhan
  • 1166 View
  • 2 Score
  • 1 Answer
  • Tags:   jquery ajax pjax

4 Answered Questions

[SOLVED] JQuery is waiting for images to load before executing document.ready

  • 2009-01-25 10:11:26
  • Simon_Weaver
  • 14620 View
  • 47 Score
  • 4 Answer
  • Tags:   jquery jquery-1.3

Sponsored Content