CODEWITHSUNDEEP
javascriptjquery
Bekki
Bekki

Reputation: 729

Check if images have loaded

I'm loading 8 images with a common class name. E.g.

<img class="commonClass" src="..." alt="" />
<img class="commonClass" src="..." alt="" />
<img class="commonClass" src="..." alt="" />

How do I use jQuery to know if all 8 images have complete loading?

I tried the below, but was not successful.

$('img.commonClass').on('load',function(){
    console.log("loaded");
});

Upvotes: 0

Views: 140

Answers (5)

George
George

Reputation: 36784

You can add a class to your loaded images, comparing the images with that class with the total number of images:

$images = $('img.commonClass').on('load', function(){
    $(this).addClass('i_has_loaded');

    var check = $images.length == $images.filter('.i_has_loaded').length;
    if(check){
        alert('All images loaded');
    }
});

JSFiddle

Upvotes: 1

kantholy
kantholy

Reputation: 994

to be a little more dynamic:

var loaded = 0, $images = $('img.commonClass');
$images.on('load',function(){
    loaded++;
    if (loaded == $images.length) {
        doSomething();
    }
});

Upvotes: 0

Ruslan Kornienko
Ruslan Kornienko

Reputation: 261

You should add uniq id for each picture. And call this function for each id picture.

$('#any_image_id')
    .load(function(){
        $('#result1').text('Image is loaded!'); 
    })
    .error(function(){
        $('#result1').text('Image is not loaded!');
    });

Upvotes: 0

user2575725
user2575725

Reputation:

Try window onload:

$(window).on('load',function(){
    console.log("loaded");
});

It will also trace whether all the image, frames, etc have been loaded.

Upvotes: 1

Ananth
Ananth

Reputation: 4397

var images = $('img.commonClass'),
    loaded = 0,
    target = images.length;

images.on('load',function(){
    loaded++;
    if (loaded == target) {
        doSomething();
    }
});

Upvotes: 1

Related Questions