Question

为什么ajax load()会在所有图像完全加载之前触发回调。

$(element).load("url #id", function()
{
    $(this).fadeIn();
})

当我加载数据时，element淡入，我看到图像在屏幕上的缓慢绘制方式......图像是否已加载但计算机速度较慢？

在完全加载内容后，我该怎么做才能显示内容？

Answer 1

$(element).load会将内容加载到element，但随后您可以找到所有图片并在其上附加加载回调，以确定何时加载了所有图片。但是，这不是很可靠，因为图像上的load事件可能由于各种原因而永远不会触发。在某些浏览器中，load事件在缓存图像时将是同步的，因此在我们甚至在图像上附加事件处理程序之前它将会触发。因此，如果5秒后未加载图片，我们仍会显示element。

$(element).load("url #id", function () {
    var $self = $(this),
        $images = $self.find('img'),
        imgCount = $images.length,
        loadedCount = 0;

    $images.on('load', function () {
        if (++loadedCount === imgCount) {
            $self.fadeIn();
            $(this).off('load');
        }
    });

    setTimeout(function () {
        if (loadedCount !== imgCount) {
            $self.fadeIn();
            $images.off('load');
        }
    }, 5000);
});

Answer 2

来自jQuery documentation：

与图片一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为，则在WebKit中无法正确触发   和以前一样的src

它没有正确地冒泡DOM树

对于已经存在于浏览器中的图像，可以停止触发   高速缓存

在相同的文档中，他们提供了加载时显示图形的灵魂。

在显示图像之前，您可以将height属性作为它需要的属性，因为只有在真正加载时它才会改变大小（仅当您没有在css中指定它时））。

$ .ajax.load（）在加载图像之前触发回调

2 个答案: