Question

我正在加载8个带有通用类名的图像。 E.g。

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

如何使用jQuery知道所有8张图片是否完全加载？

我试过以下，但没有成功。

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

Answer 1

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

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

Answer 2

尝试使用window onload：

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

它还会跟踪是否已加载所有图像，帧等。

Answer 3

您可以为已加载的图像添加一个类，将该图像与该图像的总数进行比较：

$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

Answer 4

您应该为每张图片添加uniq id。并为每个id图片调用此函数。

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

Answer 5

更有活力：

＆＃13;

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

＆＃13;

检查图像是否已加载

5 个答案: