js實例教程-Lazy Load 延遲加載圖片的jQuery插件中文使用文檔

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-Lazy Load 延遲加載圖片的jQuery插件中文使用文檔脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

什麼是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 工具箱. 這是演示頁面。

現在Lazy Load的版本已經是1.8.1

實例下載:

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

怎樣使用? 下面進入正題.

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

. 代碼如下:


<script src="jquery.js" tyPE="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>



Lazy Load的使用方法十分簡單,但新版做了一些調整,必須修改<img>標籤的屬性。把<img>標籤中的 src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL.
如下:

. 代碼如下:


<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">


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

. 代碼如下:


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


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

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

其實,並非一定要使用它規定的 data-original 屬性來存放圖片URL.你也可以自己定製別的屬性名,如下:
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">
JS代碼如下:

. 代碼如下:


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



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

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

可以使用<noscript>標籤,是用來定義在腳本未被執行時的替代內容/文本.而且這樣做還有一個好處,因為搜索引擎的爬蟲是不處理JavaScript腳本的,所以能直接抓到<noscript>標籤中的內容.

. 代碼如下:


<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>



CSS樣式設置:

. 代碼如下:


.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代碼:

. 代碼如下:


#container {
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 順序有很大差異.
這樣就會存在一種情況,某 <img> 標籤已出現在屏幕上,但它卻無法顯示!! 因為它在 HTML 文檔中的實際位置排在了那些還沒有顯示的 <img> 標籤後面, 這樣會導致顯示在屏幕上的這個 <img> 標籤無法加載相應的圖片.當Lazy Load 在找到第一個未顯示的 <img> 標籤時,查找已經被終止了, 並沒有繼續往下遍歷.

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

. 代碼如下:


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


這樣 Lazy Load 會查找到第10個未顯示的<img>標籤處.當在圖片多且布局複雜的頁面時, 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
});

什麼是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 工具箱. 這是演示頁面。

現在Lazy Load的版本已經是1.8.1

實例下載:

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

怎樣使用? 下面進入正題.

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

. 代碼如下:


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>



Lazy Load的使用方法十分簡單,但新版做了一些調整,必須修改<img>標籤的屬性。把<img>標籤中的 src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL.
如下:

. 代碼如下:


<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">


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

. 代碼如下:


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


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

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

其實,並非一定要使用它規定的 data-original 屬性來存放圖片URL.你也可以自己定製別的屬性名,如下:
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">
JS代碼如下:

. 代碼如下:


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



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

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

可以使用<noscript>標籤,是用來定義在腳本未被執行時的替代內容/文本.而且這樣做還有一個好處,因為搜索引擎的爬蟲是不處理JavaScript腳本的,所以能直接抓到<noscript>標籤中的內容.

. 代碼如下:


<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>



CSS樣式設置:

. 代碼如下:


.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代碼:

. 代碼如下:


#container {
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 順序有很大差異.
這樣就會存在一種情況,某 <img> 標籤已出現在屏幕上,但它卻無法顯示!! 因為它在 HTML 文檔中的實際位置排在了那些還沒有顯示的 <img> 標籤後面, 這樣會導致顯示在屏幕上的這個 <img> 標籤無法加載相應的圖片.當Lazy Load 在找到第一個未顯示的 <img> 標籤時,查找已經被終止了, 並沒有繼續往下遍歷.

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

. 代碼如下:


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


這樣 Lazy Load 會查找到第10個未顯示的<img>標籤處.當在圖片多且布局複雜的頁面時, 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
});

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-Lazy Load 延遲加載圖片的jQuery插件中文使用文檔全部内容,希望文章能够帮你解决js實例教程-Lazy Load 延遲加載圖片的jQuery插件中文使用文檔所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。