jQuery LazyLoad隱藏div中的圖像

Question

我有一堆圖像隱藏在div中。當用戶點擊某些鏈接時會顯示div。

我想jQuery lazyload隱藏這些圖像，直到鏈接被點擊和隱藏的div被暴露。但是，如果我根據文檔使用lazyload，那麼圖像總是會被加載，因爲隱藏的div在視口中，據推測。

有什麼想法？

Answer 1

蒂莫我想他並不想反正在DOM加載圖像之前，他需要它們。不知何故，這是使用ajax加載內容的經典場景。

我建議你去像這樣

$.fn.image = function(src, f) { 

     return this.each(function() { 

      var i = new Image(); 

      i.src = src; 

      i.onload = f; 

      this.appendChild(i); 

     }); 
    } 

    $(function() { 


     $('yourlink').click(function() { 

      $("#container").image("image.jpg", function() { 

       alert("image loaded"); 

      }); 
     }); 

    }); 

Answer 2

你真的需要懶加載插件嗎？點擊鏈接時如何用圖片替換div內容？

喜歡的東西：

<a href="link" onclick="show_images('div_id');">asdf</a> 

和

function show_images(id) { 
    $('#' + id).append('<img src="image1.jpg" /><img src="imagex.jpg" />'); 
} 

Answer 3

我寫了一個使用HTML註釋加載註釋塊內的圖像和任意的HTML標記一個jQuery插件。

以下是文章/文檔：http://bit.ly/eXxK1c

這裏的插件頁面：http://plugins.jquery.com/project/LazyLoadOnScroll

它的工作原理是這樣的：

<pre class=」i-am-lazy」 ><!– 
    <img src=」some.png」 /> 
–></pre> 

<pre class=」i-am-lazy」 ><!– 
    <div>Whatever html you want lazy loaded</div> 
–></pre> 

<script type=」text/javascript」 src=」jquery.lazyloader.js」 ></script> 
<script type=」text/javascript」 > 

$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 

</script> 

當預標籤瀏覽器窗口變得可見的佔位符標記被替換爲註釋中的html字符串。您可以使用任何類型的標記作爲佔位符，而不僅僅是預先標記，但我喜歡pre，因爲當內部有註釋時它會呈現爲0維。

Answer 4

您也可以嘗試此解決方案。至於你的形象先給圖像正確的數據交換屬性URL

<div id="imgcontainer"> 
    <img data-swap="url/to/your/image1.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image2.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image3.jpg" class="swapimg" alt="image name"> 
</div> 

，然後使用jQuery來交換屬性數據交換到SRC，什麼是真的很重要 - 檢查，如果沒有顯示此圖像在使用if語句之前。只爲表現:)

var imgs = $('.swapimg'); 

$("#imgcontainer").click(function() { 
    if (imgs.attr("src") != imgs.attr("data-swap")) { 
     imgs.each(function() { 
      $(this).attr('src', $(this).attr("data-swap")); 
     }); 
    } 
});