ajax完成后的jQuery.load（）函数。Don'；在100%加载之前，不要显示图像

我使用的是在这里找到的ajaxify-html5.js脚本：

脚本工作得很好，除了在加载内容时（大约第145行：

$content.html（contentHtml.ajaxify（）；

），您仍然可以看到加载的图像。我想创建一个函数，删除“加载”类（通过CSS转换淡入淡出内容），但仅在ajax内容不仅被获取，而且被完全加载后，才能删除该类，以避免显示部分加载的图像

我尝试在第146行插入以下内容，但没有执行

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

有什么想法吗

谢谢

---

更新：基于Karim回答的最终工作代码：

$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");   
    }
});

---

我不确定这将如何适合该插件，但我在这种情况下使用的一般解决方案（我已将其调整为尽我所能适合您的情况）如下：

$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");   
        }
    });
});