如何使用JavaScript判断图像是否已加载

Question

我正在编写一个网站，用于显示图片相册，页面正在加载缩略图并在每张图片完全加载之前应用白色叠加层。

我在本地编码，它运行良好。但是上传文件到我的服务器并加载页面会出现一些显示错误，因为jQuery的 load 函数未被触发，因为图片在脚本加载和应用之前已经加载完毕。

解决方案是仅在jQuery脚本执行时仍在加载的图像上应用白色叠加层。

我的问题是如何知道页面中特定元素是否仍在获取或已完全呈现在屏幕上？

注意：这里是页面 http://www.benjamindegenne.com/portfolio/numeric/upper-playground/。

- vdegenne

Answer 1

更新

之前的解决方案是错误的（感谢 @donut）。

这里提供了一种使用jQuery的替代简单方法 -

$(function() {
    $("<img src='img_01.jpg' />").load(function() {
        // Image img_01.jpg has been loaded
    });
});

---

JavaScript

使用 JavaScript 进行图片预加载 -

img1 = new Image();
img1.src = "image.jpg";
// at this line image.jpg has been loaded

在 img1.src = "image.jpg"; 之后，你可以确保图像已经加载完成并且可以编写业务逻辑。

jQuery

以下是一个简单的 jQuery 插件来实现这个功能 -

// image preloading plugin
$.fn.preload = function () {
    this.each(function () {
        $('<img/>')[0].src = this;
        // at this line "this" image has been loaded
    });
};

示例用法 -

var imagesToPreload = ["img01.jpg", "img02.jpg", "img03.jpg"];
imagesToPreload .preload();
// at this line all images has been loaded

- Ramesh Soni

---

如何知道图像是否已加载？ - vdegenne

@Oddantfr，您更新了代码，并在您确定图像已加载的位置添加了一些注释。 - Ramesh Soni

好的，我会尝试这个，我明白了。我会让你知道的。谢谢。 - vdegenne

我已将脚本放置在页眉而不是页面底部，且未更改任何脚本，它可以正常工作。我理解您脚本的目的，但由于图像没有被缓存（因为src属性调用了一个创建并返回适当缩略图的php脚本），我的实际脚本不需要修改。无论如何，如果有一天我改变了代码，我会考虑上述内容。谢谢！ - vdegenne

@RameshSoni 另外需要注意的一点是，在绑定load事件之后，应该设置src属性。否则，缓存的图像可能不会触发load事件。昨天在Internet Explorer 7和8中遇到了这个问题。如果加载图像时出现问题，您可能还想将一个动作绑定到error事件。 - donut

Answer 2

https://github.com/desandro/imagesloaded - 图片加载jQuery插件可以帮您完成此操作 ;-)

- Alex