如何使用 javascript 知道图像是否已加载

Question

我正在编写一个显示相册的网站，该页面正在加载拇指并在每张图片完全加载之前在它们上应用白色叠加层。

我在本地编写了这个代码，效果很好。 但是在我的服务器上上传文件并加载页面会带来一些显示错误，一些白色覆盖层不会淡出，因为 jQuery load 函数没有被触发，因为图像在脚本加载和应用之前加载。

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

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

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

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

Answer 2

https://github.com/desandro/imagesloaded - 图像加载 jQuery 插件将为您做到这一点； -)