Question

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

我知道我可以使用$（window）.load（）事件，当主页是新鲜的opend时。如何在ajax调用后使用它？我测试了$（'＃mycontainer'）。load（）但它不起作用。我无法使用resize事件，因为容器具有“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

在加载原始DOM后，您无法使用$(window).load()跟踪动态插入的图像。相反，您必须自己跟踪图像加载状态。您可以在将新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();
}

jQuery的活动＃34;加载的所有图片＆＃34; dom修改后

2 个答案: