如何在使用 jquery 进行 ajax 调用后等待图像加载？答案

【问题标题】：How do I wait for an image to load after an ajax call using jquery?如何在使用 jquery 进行 ajax 调用后等待图像加载？
【发布时间】：2009-06-14 20:40:07
【问题描述】：

我有一个 Python 脚本正在对 JPEG 图像进行一些操作。我将一些参数传递给该脚本并从我的 HTML 页面调用它。该脚本返回一个 img src="newimage.jpg 标签。

我知道如何等待脚本的回复，但我不知道如何判断图像何时完全加载（当它加载时，我想显示它）。我现在得到的是图像加载缓慢，因此用户看到了这个“加载”过程。相反，我想要一个消息告诉用户在图像加载时等待，然后我才想显示图像。

【问题讨论】：

标签： jquery python ajax

【解决方案1】：

您可以动态创建新图像，将某些内容绑定到其加载事件，并设置来源：

$('<img>').bind('load', function() {
    $(this).appendTo('body');
}).attr('src', image_source);

【讨论】：

【解决方案2】：

Image Loading

Wait for ajaxRequest

【讨论】：

很高兴看到这里写的答案，而不仅仅是在链接中
谢谢！您的链接很有帮助！

【解决方案3】：

其他答案已经提到如何使用 jQuery 来做到这一点，但无论您使用什么库，最终您都会绑定到图像的加载事件。

没有库，你可以这样做：

var el = document.getElementById('ImgLocation');

var img = document.createElement('img');
img.onload = function() {
    this.style.display = 'block';
}
img.src = '/path/to/image.jpg';
img.style.display = 'none';

el.appendChild(img);

【讨论】：