Lazy Load 延遲載入圖片的jQuery插件中文使用文件

首頁

web前端

js教程

Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:48 PM

lazy load

什麼是LazyLoad技術？

在頁面上圖片比較多的時候，開啟一張頁面必然會引起與伺服器大數據量的交互作用。尤其是對於高清晰的圖片，佔了幾百K的空間。 Lazy Load 是一個用JavaScript 編寫的jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預載的處理方式正好是相反的。
在包含許多大圖片長頁中延遲載入圖片可以加快頁面載入速度. 瀏覽器將會在載入可見圖片之後即進入就緒狀態. 在某些情況下還可以幫助降低伺服器負擔，這樣勢必會引起速度上質的提升。
相容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支援。

Lazy Load 靈感來自 Matt Mlinac 製作的 YUI ImageLoader 工具箱. 這是示範頁面。

原文的連結在:http://www.appelsiini.net/projects/lazyload

現在Lazy Load的版本已經是1.8.1

下載位址: http://www.jb51.net/jiaoben/63757.html

實例下載:

下載聲明：
1. 註：此代碼僅供學習交流，請勿用於商業用途。
2. 註：此代碼僅供學習交流，請勿用於商業用途。
檔案資訊：檔案名稱： Lazy Load延遲載入圖片實例
檔案Hash：dd3e435124e377c2da33344d442f85d1
檔案大小：1.1 MB
檔案上傳日期：2012 年3 月25 日更新2012 年3 月25 日
檔案描述：在頁面上圖片比較多的時候，開啟一張頁面必然引起與伺服器大數據量的互動。尤其是對於高清晰的圖片，佔了幾百K的空間。 Lazy Load 是一個用JavaScript 編寫的jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預載的處理方式正好是相反的。

如何使用? 下面進入正題.

Lazy Load 依賴jQuery. 請將下列程式碼加入頁面head 區域:

複製程式碼程式碼如下:

Lazy Load的使用方法十分簡單,但新版做了一些調整,必須修改 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤的屬性。把

標籤中的src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL.
如下:

複製程式碼複製程式碼

程式碼如下:

建議:src中的等待圖片,最好使用1像素的單色圖片。 JS程式碼如下: 複製程式碼

程式碼如下:

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

這樣就能實現Lazy Load的效果了. Demo

看完Demo後,是不是覺得沒什麼效果出現?這個問題會在後面提到.

其實,並非一定要使用它規定的data-original 屬性來存放圖片URL.你也可以自己定制別的屬性名,如下:
Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

JS程式碼如下: 複製程式碼

程式碼如下:

$("img.lazy").lazyload({ data_attribute : "attr" }); 🎜>

只要設定data_attribute 屬性為對應的名稱即可. (注意:html程式碼大小寫不敏感!所以"data-" 後面只能跟小寫字母或數字.)

對於不支援JavaScript的瀏覽器,應該有相應的降級處理.

可以使用

標籤中的內容. <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="3317" class="copybut" id="copybut3317" onclick="doCopy('code3317')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code3317"> <br><img class="lazy lazy" src="/static/imghw/default1.png" data-src="img/grey.gif" data-original="img/example.jpg" style="max-width:90%" heigh="480" alt="Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery" > <br><noscript><img src="/static/imghw/default1.png" data-src="img/example.jpg" class="lazy" style="max-width:90%" heigh="480" alt="Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery" >

CSS樣式設定:

複製程式碼程式碼如下:

 
.lazy>.lazy>.lazy> display: none; 
}

JS程式碼:

複製程式碼複製程式碼

複製程式碼

複製碼🎜> 代碼如下: $("img.lazy").show().lazyload();

設置圖片加載的反應距離
Lazy Load插件預設的設定是:圖片在瀏覽器視窗上出現,就會觸發載入.但透過設定threshold 屬性的值,可以調整圖片的預先載入位置/距離. 

複製程式碼

程式碼如下:

$("img.lazy").lazyload({ threshold : 200 }); 另外, threshold 可以為正數或負數.正數是預先加載, 假設數值為200, 則圖片距離出現到屏幕還有200px 時,就開始加載.如果是負數,則相反.假設數值為-200時,則圖片已經在視窗出現,並且距離瀏覽器視窗底部的距離為200px 時,才開始加載. PS:圖片和螢幕的距離是根據圖片的top 位置計算. 注意:threshold的設定需要考慮網站的長度和圖片的高度,如果數值過大則會導致無法載入的問題.建議數值設定不要超過對應圖片高度的一半.

透過事件觸發加載
可以通過jQuery定義的事件來觸發加載,也可以使用自己定義的事件. 

複製代碼

程式碼如下: $("img.lazy").lazyload({ event : "click" });

實作動畫動畫效果
上面的Demo之所以會沒有圖片加載的效果,是因為Lazy Load默認的圖片加載是通過jQuery 的show()方法來顯示,所以圖片出現幾乎是一瞬間.當然我們還可以實現其他效果. 

複製程式碼

程式碼如下:

$("img.lazy") .lazyload({ effect : "fadeIn" });

另外還可以使用slideDown() 方法,但效果不佳. 

如果想要控制動畫的速度,也可以修改effectspeed 屬性. 

複製程式碼

程式碼如下:

程式碼如下: $("img.lazy").lazyload({ effect : "fadeIn", effectspeed : 1000

});

 
effectspeed 屬性預設是空的,所以如果不設定它,動畫的時間為400毫秒. 
Container容器屬性
當要延遲加載的圖片全擺在一個容器中.只需把container 屬性指向擺放img 的容器的對象. 
css程式碼: 

複製程式碼程式碼如下:height: 600px; overflow: scroll;

}

js程式碼:

程式碼如下: $("img.lazy").lazyload({ container: $("#container") }) ;

廢話不多說,直接看Demo ,不單豎著的可以, 橫著也行Demo .

failure_limit的屬性
Lazy Load 有一個循環查找img 的機制.根據HTML文檔的佈局從上往下查找,當找到第一個並未顯示/加載的img 時,就會停止往下查找.(其實就是對$("img.lazy") 這個對象(組)進行順序查找)

那這個failure_limit 的屬性有什麼用呢?

現在網站設計時,都會用到大量的定位樣式,如: float 和position , 這樣在瀏覽器呈現的佈局效果這樣和HTML 文件中的DOM 順序有很大差異.
這樣就會存在一種情況,某 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤已出現在屏幕上,但它卻無法顯示!! 因為它在HTML 文件中的實際位置排在了那些還沒有顯示的 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤後面, 這樣會導致顯示在屏幕上的這個 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤無法加載相應的圖片.當Lazy Load 在找到第一個未顯示的 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤時,查找已經被終止了, 並沒有繼續往下遍歷.

所以這個時候,就可以使用failure_limit屬性.

複製代碼程式碼如下:

 
$("img.lazy").lazyload({ 
failure_limit : 10 
}); 

這樣Lazy Load 會查找到第10個未顯示的 Lazy Load 延遲載入圖片的jQuery插件中文使用文件_jquery

標籤處.當在圖片多且佈局複雜的頁面時, failure_limit 的作用就很大了.
原文還溫馨提示:If you have a funky layout set this number to something high. 如果你的網站佈局很"變態",建議把該值調得更高.

延遲下載圖片
可以透過自訂事件,然後透過setTimeout 來設定延遲觸發該事件.

複製程式碼程式碼如下:

 
$(function() { $("img:below-the-fold").lazyload({ 
event : "sporty" 
}); 
}); 

$(window).bind ("load", function() { 
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},5000); 
}); 
 

主要原理是,當event 被設定為scroll 以外的事件時, 實際上都會綁定了一個內建的"appear" 事件.顧名思義, 這個事件就是用來顯示圖片的. (其實scroll 也是呼叫這個事件)

skip_invisible 載入不可見的圖片
Lazy Load 外掛預設對隱藏的圖片不載入(例如display:none ).這樣做有助於效能的最佳化.如果希望連隱藏的圖片一起載入,則可以把skip_invisible 設為false .

複製程式碼程式碼

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

skip_invisible : false 
}); 

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1268

C# 教程

1248

Related knowledge

JavaScript引擎：比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

Python vs. JavaScript：學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

JavaScript：探索網絡語言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

如何使用Next.js（前端集成）構建多租戶SaaS應用程序 Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

使用Next.js（後端集成）構建多租戶SaaS應用程序 Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

從C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。