3

我想通过 AJAX 加载一些 HTML 文档，但是我想在这个文档中的所有图像都被加载时显示它。

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

“.back”应该在 Tour.html 中的所有图片都加载后可见，什么时候触发成功事件？？

4

3 回答 3

5 
$(".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>。

于 2013-02-12T20:03:41.677 回答
1

我建议使用 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";
于 2013-02-12T20:52:12.867 回答
0

ImagesLoaded是您正在寻找的。

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

该插件指定了为什么您不能load()在缓存图像上使用

于 2013-02-12T20:03:12.493 回答