Question

我在页面上有一堆图像，为了这个网站的目的，客户希望图像不会以他们慢慢显示的正常方式加载，逐行渲染。

相反，我们要做的是等到图像加载，并在图像加载时，在它的位置显示一点点加载gif。随着每个图像的加载，它会淡入。

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

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

    $(this).load(function(){

        $(this).fadeIn();

    });    

});

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

假设此页面上有20张图片，但一次只能看到1或2张图片。然后，我希望其他18个人不要被打扰，除非浏览器向下滚动以使这些显而易见。

我知道有插件可以执行此操作 - 比如lazyload - 但是我对这些插件没有很好的结果。

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

我的each（）函数最初只会循环显示可见图像
当图像进入视野时，它们会加载，然后褪色。

感谢您的时间。

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();
});

等到图像加载后再显示

2 个答案: