Question

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

我在本地编码，它工作正常。但是上传我服务器上的文件并加载页面几乎没有显示错误，因为jQuery load 函数没有被触发，因为在加载和应用脚本之前加载了图像，因此没有触发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插件的图片会为你做这件事; - ）

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

2 个答案:

更新