How to get jQuery to wait for a list of images to load before processing them?

Question

How to tell jQuery to wait for a list of images to be loaded before starting an image carousel?

I have a list of large images that are to be used in an image carousel. These images are of different sizes and I want to use javascript/jQuery to size the viewport according to the widest image and at the same time scale all images to the same height.

<div id="viewport" style="overflow:hidden" class="clearfix">
    <ul id="carousel" style="width:2000em">
       <li><img src="large01.jpg"></li>
       <li><img src="large02.jpg"></li>
       <li><img src="large03.jpg"></li>
       <li><img src="large04.jpg"></li>
       <li><img src="large05.jpg"></li>
       <!-- li { float: left } -->
    </ul>
</div>

I think I need to wait for all the images to load before I can determine their $(img).height() and $(img).width() but I have tried $(document).ready(), $(window).load(), $(window).ready() with inconsistent results across browsers. Furthermore, it seems that some .load() is deprecated already.

What is the correct method of dealing with this.

Or is there anyway to get the image width and height BEFORE the image is loaded?

possible duplicate of [jQuery/javascript - Get Image size before load](http://stackoverflow.com/questions/13850867/jquery-javascript-get-image-size-before-load) — Casey Falk, Jul 30 '14 at 15:07
`$('img').load(function() { console.log($(this).width()); })`? — putvande, Jul 30 '14 at 15:10
@putvande See http://api.jquery.com/load-event/ (the section that says `load` with images) — soktinpk, Jul 30 '14 at 15:12
To those who voted to close, are you sure the answer on the other post is valid? — Jake, Jul 31 '14 at 05:37
Even [this answer](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin?rq=1) fails to address cross browser issues. — Jake, Jul 31 '14 at 05:44

Olim Saidov · Accepted Answer · 2014-07-31T05:54:27.287

1

This should do the job:

var images = $('#carousel img');
var count = images.length;
var loaded = 0;

images.each(function() {
    var image = new Image();
    image.onload = function() {
        loaded += 1;

        if (loaded == count) {
            //all images loaded
        }
    }

    image.src = $(this).attr('src');
});

edited Jul 31 '14 at 05:54

answered Jul 30 '14 at 15:15

Olim Saidov

2,796
1
25
32

Somewhere on the internet says onload does not fire for images that are already cached... – Jake Jul 31 '14 at 05:48
@Jake you've been misinformed. This question is discussed here http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called – Olim Saidov Jul 31 '14 at 05:57
Argh... I see, you are "reloading" the images into a new Image(). – Jake Jul 31 '14 at 06:01

score 0 · Answer 2 · answered Jul 30 '14 at 15:33

0

According to jQuery documentation (see jQuery .ready() Documentation), the correct way of waiting a page to load is '$( document ).ready( handler )'. But to your question I would check the javascript naturalHeight property of the images (or naturalWidth if you will). I believe it's already set when the page is loaded (as per .ready function). You should get the values you need to be able to scale your images.

answered Jul 30 '14 at 15:33

mateuscpf

95
1
10

The `$(document).ready()` does not wait for images to load before firing. '$(window).load()` does wait, but not consistent across browsers. – Jake Jul 31 '14 at 05:23

How to get jQuery to wait for a list of images to load before processing them?

2 Answers2