jquery - 修改dom后jQuery的“所有图像加载”事件

Question

我有一个移动页面，其中（页面的）内容将通过 ajax 加载。我正在使用 iScroll，当内容刷新时，我必须重新初始化它。iScroll 需要标签的高度。当加载的内容有很多图像时，我遇到了 iScroll-timing 的问题。

我知道$(window).load()当主页重新打开时，我可以使用该事件。ajax调用后如何使用它？我测试$('#mycontainer').load()了但它不起作用。我不能使用调整大小事件，因为容器具有“100% 高度”。

有任何想法吗？

Answer 1

   //get all images
   var $imgs = $('img');
   //store imgs length
   var imgLength = $imgs.length;
   // use a an index to count loaded imgs
   var i = 0;
   $imgs.each(function() {
      // onload event for each image
      $(this).load(function() {
        i += 1;
        if(imgLength === i) // all imgs loaded
      });
   });

Answer 2

$(window).load()在原始 DOM 加载后，您不能使用它来跟踪动态插入的图像。相反，您必须自己跟踪图像加载状态。在将新的 HTML 插入 DOM 后，您可以通过调用此函数来做到这一点。将此函数传递给将在加载最后一张图像时调用的回调：

function notifyWhenAllImagesLoaded(callback) {
   var imgs = $("img");
   var cnt = imgs.length;

   function checkCnt() {
       if (cnt === 0) {
           callback();
       }
   }

   imgs.each(function() {
       if (this.complete) {
           // already loaded so count it
           --cnt;
       } else {
           // not loaded yet, so install a .load handler to let us know when it's loaded
           $(this).load(function() {
               --cnt;
               checkCnt();
           })
       }
   });
   checkCnt();
}