Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jquery插件lazyload.js延遲加載圖片的使用方法

jquery插件lazyload.js延遲加載圖片的使用方法

發布時間:2014-07-04   編輯:www.4271936.live
lazyload.js是一個基于JQuery的插件,可以用來緩沖加載圖片。下面介紹這個插件的使用方法

如果一個網頁很長并且有很多圖片的話,下載圖片就需要很多時間,那么就會影響整個網頁的加載速度,而這款延遲加載插件,會通過你的滾動情況來加載你需要看的圖片,然后它才會從后臺請求下載圖片,最后顯示出來。通過這個插件,可以在需要顯示圖片的時候,才下載圖片,從而可以減少服務器的壓力,提高頁面加載速度。

Lazy Load 插件原理

修改目標img元素的src屬性為orginal屬性,從而中斷圖片的加載。檢測滾動狀態,然后把網頁可視區域中的img的src屬性還原然后加載圖片,從而制造了一種緩沖加載的效果。代碼引入方法:

復制代碼 代碼如下:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
    $(document).ready(
    function($){
    $("img").lazyload({
         placeholder : "images/grey.gif", //加載圖片前的占位圖片
         effect      : "fadeIn" //加載圖片使用的效果(淡入)
    });
    });
</script>

但是現在,很多Javascript大牛分析得出,這個插件其實并沒有真正的起到緩加載的作用。確實是這樣,官方也已經給出了說明和解決方法了。

其實原因就在于在新版的瀏覽器中,即使我們刪除了Javascript控制的src屬性,瀏覽器仍然會去加載這個圖像。

那么我們該怎么解決呢?其實也很簡單,需要直接修改HTML的結構,在img標簽中添加新的屬性,把src屬性的值指向占位圖片,添加data-original屬性,讓其指向真正的圖像地址。比如:

復制代碼 代碼如下:

<img src="img/grey.gif" data-original="img/example.jpg" >

當然,在上面的代碼中我們把頁面內的所有圖片都延遲加載了,但有些時候我們并不希望這樣,因為有些圖片并不想然他們延遲加載,那么我們可以這樣只需做:

如只緩沖加載類main下的圖像

復制代碼 代碼如下:

$(".main img").lazyload({
     placeholder : "images/grey.gif",
     effect      : "fadeIn"
});

加載掛載有lazy類的圖像:

復制代碼 代碼如下:

$("img.lazy").lazyload({
     placeholder : "images/grey.gif",
     effect      : "fadeIn"
});

其他的以此類推,適當做一下選擇器調整就行了。

lazyload.js 高級使用方法:

下面部分來自官方文檔,將官方文檔進行了一下簡單的翻譯。

更周全的做法

我們不得不思考這樣一個問題。我們定義了這樣一個結構,那么網頁中,就不會加載源圖像了。只有當 Javascript 執行,才會顯示這個源圖像。如果用戶的瀏覽器不支持或者用戶關掉了支持 Javascript 的選項,那么我們的這個圖像就無法顯示出來。也就是說,如果沒有 Javascript 的支持,我們的圖像就無法顯示出來。

應對這個問題,我們需要引入noscript 標簽。大體思路如下:用 noscript 包含真實的圖像位置,當瀏覽器不支持 Javascript,直接顯示圖像。

復制代碼 代碼如下:

<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>

對現有圖像,隱藏處理,使用 show()方法觸發顯示。

復制代碼 代碼如下:

.lazy {
  display: none;
}

這樣,如果瀏覽器不支持 Javascript,我們自定義的 img 就不會出現,而顯示 noscript 里面的圖像。具體實現代碼如下:

復制代碼 代碼如下:

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

提前加載

默認的情況是,當你滾動到圖片位置的時候,插件開始加載。這樣,用戶可能首先看到的是一個空白圖像,然后再緩慢出現。如果你想在用戶滾動之前,提前加載這個圖像,你可以配置一下參數。

復制代碼 代碼如下:

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

threshold 這個參數,就是用來提前加載的。上面這個語句的意思是,當距離圖片還有200像素的時候,就開始加載圖片。

自定義觸發事件

默認的觸發事件,是滾動,當你滾動的時候,就會檢查然后加載。你可以使用event屬性,設置你自己的加載事件,之后你可以自定義觸發這個事件的條件,然后去加載圖像。

復制代碼 代碼如下:

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

自定義顯示效果

默認的圖片實現效果,就是沒有效果,下載完成之后,直接顯示出來。這樣的用戶體驗并不好,你可以設置effect屬性,來控制顯示圖片的效果。例如

復制代碼 代碼如下:

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

fadeIn的效果就是,改變圖片的透明度,漸現的方式出現。

把圖像插入某個容器

大家如果使用智能手機的話,經常去應用網站下載應用,他們通常使用一個橫著的容器,放一些手機截圖。使用container屬性,能很輕松在容器中實現緩沖加載。首先,我們需要用css定義這個容器,然后用這個插件進行加載。

復制代碼 代碼如下:

#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
    container: $("#container")
});

加載不可見圖像

有部分圖像是不可見的,我們對其加上類似 display:none;等屬性的圖像。默認的情況下,這個插件是不會加載隱藏的不可見圖像。如果我們需要用它加載不可見圖像,我們需要將 skip_invisible設置為false,代碼如下:

復制代碼 代碼如下:

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

好了,這就是lazyload.js這款插件的簡單介紹了。

您可能感興趣的文章:
jQuery lazyLoad圖片延遲加載插件的優化改造方法分享
Jquery uploadify圖片上傳插件無法上傳的解決方法
用jquery等比例控制圖片寬高的具體實現
jquery插件lazyload.js延遲加載圖片的使用方法
jquery實現鼠標拖動圖片效果示例代碼
jquery.lazyload 實現圖片延遲加載jquery插件
JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法
使用jquery插件實現圖片延遲加載技術詳細說明
JQuery 圖片延遲加載并等比縮放插件
jquery圖片延遲加載 前端開發技能必備系列

關鍵詞: jquery插件  lazyload.js  延遲加載   
[關閉]
微信下载APP完成任务如何赚钱 管家婆精选资料八码中特 分分pk拾和三分pk拾 好的股票融资公司 广东11选五28期开奖结果 海格通信股票行情 上海十一选五第一位走势图 河南体彩泳坛夺金官网 广西双彩最新开奖号码 陕西快乐10分软件 福建11选5走势图