Question

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

index.html

CREATE TRIGGER IF NOT EXISTS Test_2_B2_value
AFTER INSERT ON Test_2
FOR EACH ROW WHEN Test_2.B2 IS NULL
BEGIN 
NEW.B2 = (SELECT A1 FROM Test_1 LIMIT 1);
END

data.json

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

main.js

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

    ]
}

我在每次加载图像后都收到警报但是在加载所有图像时我想要一次。我怎么能这样做？

注意：我正在寻找一种以事件为导向的方式。我知道它可以通过计数器跟踪加载的图像等来完成。但那不是我想要的。

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

Answer 2

像这样写.success()方法：

$(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);
    }
    }).success(function() {
      alert("done"); //do like this 
    });

});
  function addnewimage(path){
      var img=new Image();
              img.onload = function(){
                  $("#divData").append(img);
               };
       img.src=path;
  }
});

Answer 3

您可以使用$(window).load(function() { ... });确保完全加载所有图像和其他内容。

如果您只想在此处使用图像的特定解决方案，那就是：

$(function() {  

      // To keep track of how many images have loaded
    var loaded = 0;

      // Let's retrieve how many images there are
    var numImages = 10;

      // Let's bind a function to the loading of EACH image
    $("img").load(function() {

          // One more image has loaded
        ++loaded;

          // Only if ALL the images have loaded
        if (loaded === numImages) {

              // This will be executed ONCE after all images are loaded.
            function() { ... }   
        }
    });
});

img.onload在所有图像加载后隐藏模态

3 个答案: