ajax完成后的jQuery .load（）函数。不显示图像，直到100％加载

Question

我使用这里找到ajaxify-html5.js脚本：$content.html(contentHtml).ajaxify();：https://github.com/browserstate/ajaxify

当含量（大约145线加载脚本，例外的是伟大的工作， ）你仍然可以看到加载的图像。我想创建一个删除“加载”类（用CSS过渡淡入淡出内容）的函数，但只有在ajax内容不仅仅被提取但完全加载后才能显示部分加载的图像。

我试过在146行上插入以下内容，但它没有得到执行。

$content.load(function(){ 
    alert('asds'); 
    $body.removeClass('loading'); 
}); 

任何想法？

谢谢！

---

UPDATE：基于卡里姆的答案最终工作代码：

$content.html(contentHtml).ajaxify(); /* you could fade in here if you'd like */ 

var $imgs = $content.find("img"); 
var loadCounter = 0; 
var nImages = $imgs.length; 
$imgs.load(function() { 
    loadCounter++; 
    if(nImages === loadCounter) { 
     $body.removeClass("loading"); 
    } 

// trigger load event if images have 
// been cached by the browser 
}).each(function() { 
    if(this.complete) { 
     $(this).trigger("load"); 
    } 
}); 

Answer 1

我不能肯定这将如何适应该插件，但一个通用的解决方案，我在这样的情况下使用（我有根据您的具体情况调整以适应您的情况）如下：

$content.one("load", function() { 
    var $imgs = $(this).find("img"); 
    $imgs.hide(); 
    var loadCounter = 0; 
    var nImages = $imgs.length; 
    $imgs.load(function() { 
     loadCounter++; 
     if(nImages === loadCounter) { 

      // all the images have loaded 
      // reveal them, remove the loading indicator 
      $body.removeClass("loading"); 
      $imgs.show(); 
     } 

    // trigger load event if images have 
    // been cached by the browser 
    }).each(function() { 
     if(this.complete) { 
      $(this).trigger("load"); 
     } 
    }); 
});