帶型帶秀專題之 Lazy Load (一)

今天開始帶型帶秀專題 -- Lazy Load。先從使用比較普遍的 jQuery Lazy Load 插件開始，逐步深刻。該插件已經開發到了第二版，有興趣的同窗能夠去看一看。專題第二節會深刻到源碼。

Lazy Load Plugin for jQuery

Github 地址

Lazy Load用於延遲加載圖片。它會延遲加載視口外的圖片，直到用戶滾動頁面使其出現。與圖片預加載正好相反。

在包含許多大圖片的長頁面上使用Lazy Load可以使頁面加載速度更快。在可視圖片加載後，瀏覽器將處於就緒狀態。某些狀況下也可幫助服務器減小負載。

Lazy Load啓發於 Matt Mlinac 的 YUI ImageLoader。

這裏有幾個demo可讓你快速體驗：basic options, with fadein effect, noscript fallback, page with gazillion images and load images using timeout.

注意！查看新的demo時清除緩存。你可使用開發者工具（Chrome，Safari IE）或Firebug（Firefox）查看頁面實際加載的內容。

---

➻ 用法

<!-- more -->
Lazy Load依賴於jQuery，在HTML中將其引入。

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

引入腳本後，你還須要改變img元素的的HTML代碼。添加data-original屬性，其值爲所要加載圖片的URL。除此以外，推薦爲使用Lazy Load的圖片元素添加特定的class。這樣你能夠輕鬆的控制插件綁定到哪些圖片。

例如：

<img class="lazy" data-original="img/example.jpg" width="640" height="400">

而後在腳本中添加：

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

這將會使全部擁有lazy類名的圖片延遲加載。

注意！你必須經過width和height屬性或者在CSS中爲圖片設置尺寸。不然插件不能正常工做。

➻ 設置閥值

默認狀況下，圖片出如今屏幕中時才被加載。若是你想提早加載圖片，可使用threshold參數。以下面的代碼，將閥值設置爲 200 時，圖片會提早200像素被加載。

$('img.lazy').lazyload({
      threshold: 200
});

➻ 自定義觸發事件

你可使用jQuery事件，如click或mouseover；也可使用自定義事件，如sporty或foobar。默認的事件是用戶滾動且圖像出如今視口中。若是想讓用戶點擊時圖片纔會顯示，你能夠這樣作：

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

提示！ 你可使用下面的技巧延遲加載圖像。下面的代碼會在頁面加載完畢後等待五秒加載圖像。See it working at delayed loading demo.

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

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

➻ 使用效果

默認地，插件會在圖片徹底加載後調用show()方法。固然你也能夠用你喜歡的效果。以下面的代碼使用了fadeIn效果。Check how it works at effect demo page.

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

➻ 容器中的圖像

你也能夠爲滾動容器中的圖像應用此插件，例如帶可滾動的div元素。只須要將該容器元素做爲jQuery對象傳遞。這裏有一個 水平 和 垂直 容器的例子。

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({
    container: $("#container")
});

➻ 當圖片並不是順序

頁面滾動後，插件會遍歷未加載的圖片。遍歷會檢查圖片是否變的可見。默認地，循環會在找到第一個視口外的圖像時中止。然而這是基於這樣的假設：頁面上圖像的順序與HTML代碼中順序相同。可是某些頁面的佈局不符合該假設。你能夠設置failure_limit參數以控制加載行爲。

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

將該參數設置爲10表示當在視口下方找到10個圖像時纔會中止遍歷圖像。若是你的佈局更加特別，能夠把該參數值調爲更高。最差的狀況是該值爲實際圖片的數量。

➻ 處理不可見圖片

有時會有這樣的狀況出現，圖片在視口中在並非:visible。爲了提升性能，你能夠選擇忽略.not(':visible')的圖像。

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

HEADS UP! Webkit browsers will report images with without width and height as not .not(":visible"). This causes images to appear only when you scroll a bit. Either fix your image tags or keep skip_invisible as false. Use this feature only if you know what you are doing.

➻ 安裝

你可使用bower或者npm安裝：

$ bower install jquery.lazyload
$ npm install jquery-lazyload

（完）