javascript - $.ajax.load() 在图片加载前触发回调

Question

为什么ajaxload()会在所有图片都加载完之前触发回调。

$(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 文档：

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

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

1. 它不能始终如一地工作，也不能可靠地跨浏览器
2. 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
3. 它没有正确地冒泡 DOM 树
4. 可以停止对已经存在于浏览器缓存中的图像进行触发

在同一个文档中，它们提供了在加载图形时显示图形的方法。

您可以height在显示图像之前检查该属性是否为它需要的属性，因为它只有在真正加载时才会改变大小（但前提是您没有在 css 中指定它）。