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

为什么ajax

load（）

会在所有图像完全加载之前触发回调

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

当我加载数据时，

元素

淡入，我看到图像是如何在屏幕上缓慢绘制的。。。是图像加载了，但计算机速度慢吗

在内容完全加载后，我应该如何显示内容？

来自：

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

开发人员试图使用.load（）解决的一个常见问题 快捷方式是在图像（或 图像）已完全加载。有几个已知的警告 这一点值得注意。这些是：

它在跨浏览器中无法稳定工作，也不可靠

如果图像src设置为 和以前一样的src

它不能正确地在DOM树上冒泡

可以停止对已存在于浏览器中的图像的激发 缓存

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

您可以在显示图像之前将

height

属性设置为所需的属性，因为只有在实际加载后（仅当您没有在css中指定它时），它才会更改大小。

$（元素）。load

将内容加载到

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

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

因为它并不意味着要等到内容加载之后，它只是执行一个ajax请求，获取内容并附加内容。追加后，调用success，然后开始加载图像。回调意味着只有返回的HTML在这里，您需要做额外的工作来完成此操作done@Sedz但是，为什么在所有内容都已完全加载时触发$（window）.load（）回调呢？jQuery有一个和一个是两个不同的东西。正如上文allready所述，您的回调是针对ajax请求的。@MarcelGwerder感谢您澄清这一点，但我的解决方案应该是什么？OP使用的方法似乎是ajax
load
method（），而不是
load
event方法。我从同一文档中添加了一个解决方案False。当图像开始加载时，它将显示全高。它可能会一行一行地加载30秒，只是在我的虚拟机上进行了测试。@skmasq，没问题，我还没有测试过自己；）您可以将5秒超时调整到您想要的更合适的时间。我只是想，如果您的负载分配不正确，我会使用
.each（）
来分配
.load（）
，但我会让您知道它是如何工作的。@skmasq，jQuery已经自动完成了迭代，但是您可能更喜欢在（'load'）上使用
避免与加载内容而不是附加事件处理程序的另一个
加载
函数调用混淆。