加载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');
}