僅當元素進入視口時纔會加載圖像

我正在構建一個圖片庫，我只想在內容「DIV」元素進入視口時才加載圖像。我正在使用jquery viewport.js。僅當元素進入視口時纔會加載圖像

默認情況下，我將每個「IMG」標籤的src屬性設置爲「LOADING.JPEG」，當任何div進入視口時，我將IMG標籤的src屬性更改爲真實圖像。但是，在更改SRC屬性圖像不改變它仍然顯示LOADING.JPEG。

$(".content").each(function(i,obj){ 
    var element = obj.id; 
    if($("#"+element).is(':in-viewport')){ 
     var link = $("#"+element+" div a").attr('href'); 
     //set the image src from loading to read image 
     $("#"+element+" div a img").attr('src',link); 
    } 
});

任何幫助或建議將不勝感激。

謝謝

來源

2013-04-22 coder

爲什麼你讓它變得複雜 - ？試試這個 -

$(".content").each(function(i,obj){ 
    if($(this)).is(':in-viewport')){ 
     var link = $("div a",this).attr('href'); 
     //set the image src from loading to read image 
     $("div a img",this).prop('src',link); 
    } 
});

來源

2013-04-22 17:22:57

感謝穆罕默德您的回覆，其我的HTML結構，是的我們也可以按照您的建議來做。但它會更改圖像的src標記，但不會刷新imgae。 – coder 2013-04-22 17:44:46

您是否試過使用Lazy Load jQuery plugin？

當它們在視口中時，它會輕輕地淡入一些圖像。很容易的設置也一樣，你只需要調用在每個圖像的數據屬性：

<img class="lazy" data-original=「img/example.jpg」 src=「img/grey.gif」 width=「640」 height=「480」>

，並啓動它喜歡它這樣：

$("img.lazy").lazyload();

來源

2013-04-26 10:34:51 egr103

僅當元素進入視口時纔會加載圖像

回答

相關問題