$.ajax.load()在加载图像之前触发回调

$.ajax.load() triggers callback before images are loaded

本文关键字：回调 图像 加载 load ajax      更新时间：2023-09-26

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

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

当我加载数据时，element淡出，我看到图像如何在我的屏幕上缓慢绘制…是加载了图像，但电脑很慢吗?

我应该怎么做才能显示内容后，它完全加载?

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

来自jQuery文档:

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

开发人员试图使用.load()来解决的一个常见挑战快捷方式是在图像(或集合)的时候执行函数图片)已完全加载。有几个已知的警告这一点值得注意。这些都是:
  1. 它不一致也不可靠跨浏览器
  2. 在WebKit中如果图像src被设置为与之前相同的src
  3. 它没有正确地弹出DOM树
  4. 可以停止触发已经存在于浏览器中的图像缓存

在相同的文档中，他们提供了一个解决方案，在加载图形时显示图形

你可以检查height属性是什么需要之前显示的图像，因为它会改变大小只有当它已经真正加载(只有当你没有在css中指定它)。

相关文章：