1

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

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

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

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

    $(this).load(function(){

        $(this).fadeIn();

    });    

});

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

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

我知道有一些插件可以做到这一点——比如lazyload——但我对这些插件没有很好的效果。

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

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

谢谢你的时间。

4

2 回答 2

2

你可以试试像InView这样的插件。

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

编辑

这是一个如何使用插件“延迟加载”图像的示例。

// 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()and delegate()，您可能应该使用其中之一。

于 2012-11-21T07:23:13.253 回答
-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();
});
于 2012-11-21T07:09:48.240 回答