如何在使用jQuery的Ajax调用后等待图片加载？

Question

我有一个用Python写的脚本，它可以对JPEG图片进行一些处理。我把一些参数传给这个脚本，然后从我的HTML页面调用它。这个脚本会返回一个标签。

我知道怎么等待脚本的回复，但我不知道怎么判断图片是否完全加载（当它加载完毕时，我想显示它）。现在的情况是，图片加载得很慢，用户看到的是一个“加载中”的过程。相反，我想在图片加载时给用户一个提示，让他们等一下，等图片加载完成后再显示出来。

Answer 1

其他回答提到了如何使用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);

Answer 2

图片加载

等待ajax请求

Answer 3

你可以动态地创建一张新图片，给它的加载事件绑定一些东西，然后设置它的来源：

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