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

这可能不是你想要的东西，但出于好奇，我做了些什么。可能它会帮助你。

Demo

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

加载div中的每个图像后运行一个函数

5 个答案: