2009-11-15 20 views
28

我在瀏覽網頁時,看到了以前從未見過的東西。本網站上的 : http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/當他們進入瀏覽器的可見部分時加載圖像嗎?

當您向下導航頁面時,圖片僅在瀏覽器可見部分加載時才加載。 我從來沒有見過這個,並想知道是否有其他人有,以及如何一個人會這樣做。

我猜這是某種WordPress插件(這就是他使用的),但我不確定。 它是JavaScript嗎?它們實際上是在加載頁面時加載的,但稍後會出現「時髦」效果,或者這對於更快的頁面加載時間實際上有用?

+0

作爲一個側面說明,手機使用更少的電力,如果你做你的下載在一個突發而不是簡單許多陣陣。這個插件可能會減少手機電池的使用壽命。我承擔的影響很小,但值得注意。這裏有一個技術講座,比我做過的更嚴重的測量:http://www.youtube.com/watch?v=Il4swGfTOSM他們基本上建議所有低於一折的內容一次加載爲一個在用戶滾動一下後進行二次下載。 – 2013-09-07 21:55:40

回答

12

LazyLoad根據網站不再提供。顯然,代碼不再適用於新的瀏覽器,作者也沒有時間更新它。

「出現」插件對我而言效果很好。

http://plugins.jquery.com/appear/

它允許你指定一個回調函數的元素。回調函數在元素出現在視圖中時調用。來自網站:

$('#foo').appear(function() { 
    $(this).text('Hello world'); 
}); 
+3

當時我寫了我的答案(大約9個月前),LazyLoad沒有被其作者維護。也許作者現在已經開始再次研究它。請記住問題的答案日期。 – Sanjay 2012-06-18 18:58:35

+1

jquery-appear從Google Code中消失了(哈!)。 LazyLoad出現(哈!)復活,請參閱http://www.appelsiini.net/projects/lazyload。 – bouke 2013-07-23 09:03:31

2

如果你看一下你所引用的頁面的源代碼,它包含了這段代碼:

jQuery(document).ready(function($){ 
    jQuery(".SC img").lazyload({ 
    effect:"fadeIn", 
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" 
    }); 
}); 

我懷疑是他們是如何實現的效果。它使用jQuery的LazyLoad插件,它可以在這裏找到:

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

13

「的wp-content /插件/ jQuery的圖像延遲加載」

延遲加載器是一個jQuery插件編寫 在JavaScript中。它會延遲在(長)網頁中加載 圖像。在用戶 滾動到它們之前不會加載在視口之外的圖像 ( 網頁的可見部分)。這與 圖像預加載相反。

在包含許多大圖像的長網頁 上使用延遲加載使頁面加載速度更快。加載可見的 圖像後,瀏覽器將在 就緒狀態。在某些情況下,它還可以幫助 減少服務器負載。

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

所以看起來它通過指定每個圖像或內部元素的背景和替換圖像之前的佔位符GIF完全加載的SRC,保存原始URI和當圖像是「可見的」,它將佔位符替換爲真實圖像。

+0

LazyLoad插件根據其網站已不再可用。請參閱下面的答案。 – Sanjay 2011-09-11 17:05:59

+2

延遲加載始終可用。它從未被刪除。但是,即使刪除了src屬性,新瀏覽器也會強制加載圖像。因此,您現在必須修改HTML才能使其工作。我終於有時間更新文檔。還刪除了所有不再工作的舊代碼。 – 2011-11-20 01:21:43

相關問題