等待圖像加載之前顯示

我有一大堆的圖像在網頁上，爲了本網站的目的，客戶希望圖像不以正常的方式加載，他們慢慢地出現，逐行呈現。等待圖像加載之前顯示

相反，我們要做的是等到圖像加載完成，並且圖像加載完成後，在它的位置顯示一個小的加載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

等待圖像加載之前顯示

回答

相關問題