檢查圖像是否已加載

Question

我正在加載具有通用類名的8張圖像。 例如

<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).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

更具活力：

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