加載div中的每個圖像后，運行一個函數

Question

說我有這個標記

<div id="imageDiv">
    <img src="/img/1.jpg" />
    <img src="/img/2.jpg" />
    <img src="/img/3.jpg" />
    <img src="/img/4.jpg" />
    <img src="/img/5.jpg" />
</div>

我想做的是運行一個函數，但僅在加載完所有圖像之后。現在，我沒有任何實際的代碼可顯示，但是我能看到的唯一方法是執行此操作（偽代碼，因此未經測試）

function imagesReady(){
    $.each(imageReady, function(key, val){
        if (!val){
            return;
        }
    });
    nowDoTheMainFunction();
}
var imageReady = [];
$.each(imageDiv, function(key,imageElement){
    imageReady[key] = false;
    imageElement.addLoadListener(function(){
        imageReady[key] = true;
        imagesReady();
    });
});

有沒有比這更整潔/更好的方法了？

Answer 1

您可以嘗試以下方法：

$(window).on('load', function() {
    nowDoTheMainFunction();
});

Answer 2

我認為能夠做到這一點的最佳方法是使用JQuery onload function 。

$( "#imageDiv" ).load(function() {
    // once the images have loaded
});

這將等到圖像加載完畢后，任何功能才能運行。

Answer 3

最簡單的方法是使用window.onload事件。 直到所有資源（包括CSS和圖像）均已加載並准備就緒，這才會觸發。

Answer 4

這必須做您想完成的事情

$("#imageDiv img").one('load', function () {
        // Your code
    }).each(function () {
        if (this.complete) $(this).load();
    });

Answer 5

這可能不是您要查找的東西，但是出於好奇，我做了一些事情。 可能會對您有幫助。

演示

HTML：

<div id="imageDiv"></div>

JS：

var sources = ['http://i.imgur.com/qNRcqpo.jpg?1', 'http://i.imgur.com/iXTvWhX.jpg']  ;
var images = {};
    var loadedImages = 0;
    var numImages = sources.length;


    for (var src in sources) {
        images[src] = document.createElement("img");;
        images[src].id = src;
        images[src].onload = function () {

            if (++loadedImages >= numImages) {
                functionTobeCalled();
            }

        };
        images[src].src = sources[src];
         $('#imageDiv').append(images[src]);
    }

function functionTobeCalled (){
alert('all images loaded');
}