Question

我想通过AJAX加载一些HTML文档，但我希望在本文档中的所有图像被填充时显示它。

$('.about').click(function () {
    $(".back").load('Tour.html', function () {
        $(".back").show();
    });
});

当加载Tour.html中的所有图像，触发成功事件时，

“。back”应该是可见的吗？

Answer 1

$(".back").load('Tour.html', function (html) {
    var $imgs = $(html).find('img');
    var len = $imgs.length, loaded = 0;
    $imgs.one('load', function() {
        loaded++;
        if (loaded == len) {
            $(".back").show();
        }
    })
    .each(function () { if (this.complete) { $(this).trigger('load'); });
});

这需要在返回的html中至少有一个<img>。

Answer 2

我建议使用iframe代替。以下是纯JavaScript中的一些示例代码：

var ifr=document.createElement("iframe");
ifr.style.display="none";
document.body.appendChild(ifr);
ifr.onload=function() {
    // Do what you want with Tour.html loaded in the iframe
};
ifr.src="Tour.html";

Answer 3

ImagesLoaded正是您要找的。

在加载指定的图像时放置所有代码（在这种情况下为ajax请求）。

该插件指定了您无法在缓存图像上使用load()的原因

什么时候触发AJAX成功？

3 个答案: