首頁 > 文章 > web前端 > 圖片的懶載入以及jquery.lazyload.js的使用實例

圖片的懶載入以及jquery.lazyload.js的使用實例

零下一度原創: 2017-06-26 10:35:281197瀏覽

在專案中有時候會用到圖片的延遲加載，那麼延遲加載的好處是啥呢？

我覺得主要包括兩點吧，第一是在包含很多大圖片長頁面中延遲加載圖片可以加快頁面加載速度；第二是幫助降低伺服器負擔。

下面介紹常用的延遲載入外掛jquery.lazyload.js以及怎麼實作一個延遲載入的外掛。

一：jquery.lazyload.js插件

lazyload是jQuery寫的延遲加載插件，在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預先載入的處理方式正好是相反的。

實作原理

首先選取的img元素都綁定了一個appear事件(處理img顯示真實的圖片位址)，方便以後滿足條件時觸發該事件；

在配置物件中有一個container屬性配置，預設為window，如果img元素在該container容器視口中，則觸發appear事件；

為了判斷img元素是否在container容器視口範圍中，有如下四個方法：

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

具體使用

1.頁面引入方式

由於延遲載入lazyload是依賴jquery的，所有頁面需要引入jquery，如下：

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

基本寫法：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

其中的data-original 屬性存放真實的圖片url路徑。

小貼士：你必須設定圖片的寬度或高度在css中，否則外掛程式可能無法正常運作。

設定Threshold

預設圖片會出現在螢幕時載入. 如果你想提前載入圖片, 可以設定threshold 選項, 設定threshold 為200 令圖片在距離畫面200像素時提前載入。

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

設定事件觸發載入

事件可以是任何jQuery 事件, 如: click 和mouseover. 你也可以使用自訂的事件, 如: sporty 和foobar . 預設情況下處於等待狀態, 直到使用者滾動到視窗上圖片所在位置. 在灰色佔位圖片被點擊之前阻止載入圖片, 你可以這樣做:

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

當然，你也可以用下面的這種方式實現延遲載入：

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

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

即是頁面載入完成5 秒後,再去執行圖片的懶載入。

延遲載入效果

當圖片完全載入的時候, 外掛預設地使用show() 方法來將圖顯示出來. 其實你可以使用任何你想用的特效來處理. 下面的程式碼使用FadeIn 效果：

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

不支援JavaScript的瀏覽器的使用方式

幾乎所有瀏覽器的JavaScript 都是啟動的. 然而可能你仍希望能在不支援JavaScript 的客戶端展示真實圖片. 當瀏覽器不支援JavaScript 時優雅降級, 你可以將真實的圖片片段在寫