等到图像加载后再显示

Question

我在一个页面上有一堆图像，出于本网站的目的，客户希望图像不要以正常方式加载，它们会慢慢出现，逐行渲染。

相反，我们要做的是等到图像加载完毕，然后在加载图像时，在其位置显示一点加载 gif。随着每张图片的加载，它会淡入。

到目前为止，我为此所做的是：

$('img').each(function(){

    $(this).load(function(){

        $(this).fadeIn();

    });    

});

按预期工作。但我想把它提升到一个新的水平。

假设此页面上有 20 张图片，但一次只能在页面上看到 1 或 2 张。然后，我希望其他 18 个不会被加载，除非浏览器向下滚动以使它们变得明显。

我知道有一些插件可以做到这一点——比如lazyload——但我没有用这些插件获得好的结果。

如何使用 jquery 或 javascript 检查图像是否在当前视口中？

1. 我的 each() 函数最初只会遍历可见图像
2. 当图像进入视野时，它们会加载，然后淡入。

感谢您的宝贵时间。

Answer 1

你可以试试 InView 之类的插件。

但是，您可能必须将事件附加到 img 的容器中，并且只有在容器“可见”时才加载图像。

编辑

Here's an example 了解如何使用插件“延迟加载”图片。

// Assuming that all images have set the 'data-src' attribute
// instead of the 'src' attribute
$("img[data-src]").live("inview", function() {

    // Load the image
    $(this).attr("src", $(this).attr("data-src"));

    // Remove it from the set of matching elements in order to avoid
    // the handler from re-executing
    $(this).removeAttr("data-src");

});

注意：live() 正在被 on() 和 delegate() 取代，您可能应该使用其中之一。

Answer 2

做这样的事情

<div id='loder'><img src="loder.gif"></div>

<div id='images' style="display:none;">
<img src='image1.jpg'>
<img src='image2.jpg'>
<img src='image3.jpg'>
<img src='image4.jpg'>
<img src='image5.jpg'>
</div>

然后在文档准备好时隐藏加载器 div 并显示图像 div。

$(function(){
$("#loder").hide();
$("#images").show();
});