簡(jiǎn)介

lazyload.js用于長(zhǎng)頁(yè)面圖片的延遲加載，視口外的圖片會(huì)在窗口滾動(dòng)到它的位置時(shí)再進(jìn)行加載，這是與預(yù)加載相反的。

優(yōu)點(diǎn)：

• 它可以提高頁(yè)面加載速度；
• 在某些情況清晰它也可以幫助減少服務(wù)器負(fù)載。

安裝

bower安裝：

$ bower install jquery.lazyload

npm安裝:

$ npm install jquery-lazyload  

使用

lazyload依賴與jquery。所以先引入jquery和lazyload

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

1.將圖片路徑寫入data-original屬性
2.給lazyload的圖片增加一個(gè)名為lazy的class
3.選擇所有要lazyload的圖片（img.lazy），執(zhí)行l(wèi)azyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
	$(function(){
		$("img.lazy").lazyload();
	})
</script>

注意：必須設(shè)置圖片的高度或者寬度，否則插件可能無(wú)法正常工作

提前加載——Threshold

lazyload默認(rèn)是當(dāng)滾動(dòng)到該圖片位置時(shí)，加載該圖片。但是可以通過(guò)設(shè)置Threshold參數(shù)來(lái)實(shí)現(xiàn)滾到距離其xx px時(shí)就加載。

	$(function(){
		$("img.lazy").lazyload({
			threshold :20
		});
	})

上面的例子設(shè)置了滾動(dòng)到距離圖片20px時(shí)，圖片就開始再開始加載

事件觸發(fā)(可以是jquery事件，也可以是自定義事件)——Event

當(dāng)觸發(fā)定義的事件時(shí)，圖片才開始加載

	$(function(){
		$("img.lazy").lazyload({
			event : "click"
		});
	})

上面的例子使圖片點(diǎn)擊后，才開始加載

Tip:你可以使用這個(gè)來(lái)實(shí)現(xiàn)圖片的延遲加載

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

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

上面的代碼在頁(yè)面加載完畢后五秒才開始加載圖片

設(shè)定效果——Effects

插件默認(rèn)的加載效果是 show() ,你可以使用任何你想要的效果。下面的代碼使用了 fadeIn()

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

滾動(dòng)容器內(nèi)的圖片——container

插件也可以使用在滾動(dòng)容器內(nèi)的圖片上。下面的div擁有scrollerbar，內(nèi)容的內(nèi)容進(jìn)行滾動(dòng)，滾到圖片位置時(shí)，圖片開始加載

<div style="height:600px;overflow:scroll" id="container">
	<img class="lazy" data-original="img/example.jpg"  alt="" style="margin-top:1000px" height="200">
</div>
<script>
	$(function(){
		$("img.lazy").lazyload({
			container: $("#container")
		});
	})
</script>

不順序排列的圖片

• 插件會(huì)執(zhí)行一個(gè)尋找未加載圖片的循壞，該循環(huán)會(huì)檢查圖片是否可見，默認(rèn)情況下，當(dāng)?shù)谝粋€(gè)視圖外的圖片被找到，循環(huán)就會(huì)停止 。
• 但是存在一種情況：頁(yè)面布局圖片的順序和html圖片代碼的順序不一致;它會(huì)導(dǎo)致本該加載的沒有加載。這種情況下就可以將 failurelimit 設(shè)為 10 ，它令插件找到 10 個(gè)不在可見區(qū)域的圖片是才停止搜索. 如果你有一個(gè)惡心的布局, 請(qǐng)把這個(gè)參數(shù)設(shè)高一點(diǎn)。

代碼：

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

處理隱藏圖片——skip_invisible

為了提升性能，插件默認(rèn)忽略隱藏的圖片；如果想要加載隱藏圖片.設(shè)置skip_invisible為false;

注意：Webkit瀏覽器將自動(dòng)把沒有寬度和高度的圖像視為不可見

$("img.lazy").lazyload({
    skip_invisible : true
});

到此這篇關(guān)于lazyload.js詳解的文章就介紹到這了,更多相關(guān)lazyload.js詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論