等待图像加载之前显示

我有一大堆的图像在网页上，为了本网站的目的，客户希望图像不以正常的方式加载，他们慢慢地出现，逐行呈现。等待图像加载之前显示

相反，我们要做的是等到图像加载完成，并且图像加载完成后，在它的位置显示一个小的加载gif。由于每个图像加载，它消失在

我已经为这个做什么，到目前为止是这样的：

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

    $(this).load(function(){ 

     $(this).fadeIn(); 

    });  

});

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

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

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

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

我的每一个（）函数将通过可见图像仅在初始循环
为图像映入眼帘，它们将加载，然后淡入。

谢谢你的时间。

来源

2012-11-21 willdanceforfun

你可以尝试像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()替代，你应该使用其中的一个来代替。

来源

2012-11-21 07:23:13 Labu

看起来很有前途。我现在会研究它。 – willdanceforfun

-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>

然后在文件准备隐藏该装填股利和显示图像股利。

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

来源

2012-11-21 07:09:48

这不会实现我想要做的任何事情。而你正在为我解决的事情，我已经在问题中用我的代码完成了。 – willdanceforfun

等待图像加载之前显示

回答

相关问题