我如何知道 AJAX 加载的内容何时完成图像加载？

Question

我正在从 AJAX 请求加载 HTML，以及其中的一些 img 标记。

我需要知道 AJAX 中加载的图像何时完全加载以调整容器大小。 我不知道结果中有多少张图像，所以我不能简单地检查 .complete 值。

你知道这个问题的解决方案吗？

Answer 1

如果您使用 jQuery，则 $(window).load() 命令可以设置一个在加载所有图像后调用的函数，如下所示：

$(window).load(
    function() {
        // weave your magic here.
    }
);

如果您不使用 jQuery，当我想要它的一点点功能时，我会做我已经做过的事情：下载它并检查源代码以了解它是如何实现的。 然后就这样做:-)

Answer 2

好的，多亏了 Pax，我找到了解决方案。

在 ajax 请求的 success 事件（使用 jQuery）中，我添加了以下代码：

$('img', this).load(function() {
    resize_element(this);
});

谢谢你们！

Answer 3

XMLHTTPrequests 具有可用于确定加载何时完成的属性。 如果您直接使用 JavaScript，则需要为 onreadystatechange 事件分配一个函数。 每次状态改变时都会调用此方法。 状态存储在 ReadyState 中，如下所示：

0. 未启动
1. 加载
2. 已加载
3. 交互
4. 完成

在您的函数中，您检查状态是否为 4 并调用其他所需函数。

jQuery 有一些事件可以告诉您某些事情何时发生。 查看 AJAX 文档