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

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

我在本地编码，它工作正常。 但是上传我的服务器上的文件并加载页面几乎没有显示错误，一些白色覆盖不会消失，因为在加载脚本并应用脚本之前图像加载时不会触发jQuery 加载function。

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

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

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

Answer 1

https://github.com/desandro/imagesloaded – 图片加载jQuery插件将为你做到这一点;-)

Answer 2

更新

之前的解决方案不正确。 （感谢@donut）。

以下是使用jQuery执行此操作的另一种简单方法 –

$(function() { $("").load(function() { // Image https://stackoverflow.com/questions/7712002/how-to-know-whether-or-not-a-image-has-been-loaded-using-javascript/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 () { $('')[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