javascript - img.onload 在所有图像加载后隐藏模式

Question

我使用 JSON 来获取图像的路径，然后动态创建我想要加载的 URL。

index.html

<div id="divData"></div>

data.json

{
"images":[
    {"path":"slide1.jpg"},
    {"path":"slide2.jpg"}

    ]
}

main.js

$(function(){

var siteUrl='data.json'; //get the json file via ajax
   $.getJSON(siteUrl, function(json, textStatus) {

    var rootObj=json.images
    for(var i=0;i<rootObj.length;i++){

        var fullpath="http://placehold.it/350x150"
        addnewimage(fullpath);
    }
    });

});

function addnewimage(path){
    var img=new Image();
            img.onload = function(){
                $("#divData").append(img);
                alert("done load");**// this alert show after every image** load
             };
        img.src=path;
}
});

我在每次图像加载后都会收到警报，但我希望在所有图像加载完毕后收到一次警报。我怎样才能做到这一点？

注意:我正在寻找一种事件驱动的方式。我知道这可以通过跟踪加载的图像等的计数器来完成。但这不是我想要的。

Answer 1

试试这个:

var noOfImages = 0;
$(function () {
    var siteUrl = 'data.json'; //get the json file via ajax
    $.getJSON(siteUrl, function (json, textStatus) {

        var rootObj = json.images;
        noOfImages = rootObj.length; // No of images to be loaded

        for (var i = 0; i < rootObj.length; i++) {
            var fullpath = "http://placehold.it/350x150";
            addnewimage(fullpath);
        }
    });

});

function addnewimage(path) {
    var img = new Image();
    img.onload = function () {
        $("#divData").append(img);
        noOfImages -= 1;

        if (noOfImages === 0) {
            alert("All images are loaded"); 
        }
    };
    img.src = path;
}