javascript - 如何知道是否已使用 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

<罢工>