懶加載插件加載圖像作爲用戶滾動？

我真的很喜歡懶惰的加載插件，我很內疚，它不適用於新的瀏覽器。懶加載插件加載圖像作爲用戶滾動？

是否有反正我可以寫我自己的代碼，不加載圖像下面的圖像，直到用戶滾動？

<img _src="/fullscreen/img/You are everywhere 2.png" class='lazyLoad' /> 

jQuery('.lazyLoad').each(function(){ 
     var _elm= jQuery(this); 
     _elm.attr('src',_elm.attr('_src')); 

     //on DOM ready loop through each 
     //image with class=lazyLoad and add src attribute to it. 
})

這將是巨大的，如果我能得到這個釘，真是可惜the appelsiini site不支持任何更長的時間。

我發現了一個可以在所有瀏覽器中工作的網站http://haw-lin.com/，它使用了一個非常類似於http://www.appelsiini.net/projects/lazyload的插件腳本。沒有MIT許可證，我覺得很難破譯。

你推薦什麼jQuery圖像延遲加載插件？

來源

2011-01-06 Tara Irvine

什麼瀏覽器不起作用？ – 2011-01-06 18:27:50

appelslini.net上的那個似乎在firefox和chrome和Safari – dstarh 2011-01-06 19:05:07

Safari中工作得很好，雖然這是我的測試失敗，我被告知這是一個錯誤。現在我不太確定 – 2011-01-12 19:43:39

jQuery image lazy load plugin的演示頁面在Mac上的FF3.6上似乎不起作用。我正在用Firebug的Net標籤查看HTTP請求，我可以看到所有加載的圖像。

你可以看看這個名爲JAIL的插件，它完美地工作（儘管需要一些HTML更改）。我特別建議看看這些例子。

來源

2011-01-09 09:37:07 sebarmeli

如果你看看forks of jquery_lazyload in github，其中一些address the issues與newer browsers。

來源

2011-01-06 19:06:20

你可以試試這個jQuery插件我寫了一個使用HTML註釋來延遲加載HTML的任意位，包括圖片：

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

下面是一個例子：

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

<pre class=」i-am-lazy」 ><!– 
    <div>Any, html css img background, whatever. <img src=」some.png」 /> </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評論。當佔位符在視口中變爲可見時，它將被替換爲註釋內的HTML字符串。

您可以對佔位符使用任何標記，但是我喜歡pre，因爲只有裏面只有註釋才呈現爲0維。

來源

2011-04-20 14:21:39

懶加載插件加載圖像作爲用戶滾動？

回答

相關問題