延遲加載圖像時，他們進入視口

Question

我最近遇到博客/網站最近只加載圖像時，他們滾動到可見的視口。然後它會淡入。有沒有jQuery ...甚至是WordPress的插件呢？

例如http://icodeblog.com

Answer 1

有關JavaScript的好處之一是您可以查看源代碼並查看發生了什麼。查看源代碼後，我發現這一點：

http://www.appelsiini.net/projects/lazyload

Answer 2

LazyReady：http://plugins.jquery.com/project/LazyReady

Answer 3

你可以試試這個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維。

希望這有助於！ @MW_Collins