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

I'm coding a website that displays picture albums, the page is loading the thumbs and applies white overlays on each picture before they are fully loaded.

我正在为一个显示相册的网站编码，页面正在加载拇指，并在图片完全加载之前在每个图片上应用白色覆盖。

I coded this in local and it works fine. But uploading the files on my server and loading the page brings few errors of display, some white overlay are not fading out because the jQuery load function is not triggered since images load before the script is loaded and being applied.

我在本地编写了这个代码，它运行得很好。但是，在我的服务器上上传文件并加载页面时，几乎不会出现显示错误，一些白色的叠加没有消失，因为jQuery加载函数没有被触发，因为在加载和应用脚本之前，图像已经被加载。

The solution would be to apply white overlay only on images that are still loaded when the jQuery script is being executed.

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

My question is how to know if a specific element in the page is still being fetched or has completely been rendered on the screen ?

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

NOTE : here's the page http://www.benjamindegenne.com/portfolio/numeric/upper-playground/

注意:这里是http://www.benjamindegenne.com/portfolio/numeric/topplayground/。

2 个解决方案

#1

https://github.com/desandro/imagesloaded - images loaded jQuery plug in will do that for you ;-)

https://github.com/desandro/imagesloaded -加载jQuery插件的图像将为您做这件事;

#2

Updates

The previous solution was incorrect. (Thanks to @donut).

之前的解决方案是错误的。(由于@donut)。

Here is alternative simple way to do this using jQuery -

下面是使用jQuery的另一种简单方法。

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

---

JavaScript

JavaScript

Use Image pre-loading in JavaScript -

在JavaScript中使用图像预加载。

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

After img1.src = "image.jpg";, you can assure that image has been loaded and you can write your business logic

img1之后。src = "image.jpg";你可以保证图片已经被加载，你可以编写你的业务逻辑

jQuery

jQuery

Here is a simple jQuery plugin to accomplish this -

这里有一个简单的jQuery插件来实现这一点

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

Sample usage -

样品的使用。

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