Question to say "I can!"

緩沖加載圖片

2012-09-01

這方法很炫!

參考于:水煮魚——緩沖加載圖片的 jQuery 插件 lazyload.js 使用方法詳解

 

Lazy Load 這個 jQuery 插件,是用來緩沖加載圖片的插件。如果一篇文章很長有很多圖片的話,下載圖片就需要很多時間。而這款插件,會檢測你的滾動情況,只有你要看到那個圖片的時 候,它才會從后臺請求下載圖片,然后顯示出來。使用這個插件,可以在需要顯示圖片的時候,才下載圖片,所以可以減少服務器的壓力,避免不必要的資源下載。 如果一個人不看下面的圖片,那加載下面的圖片就是一種浪費。

Lazy Load 插件原理

修改目標 img 的 src 屬性為 orginal 屬性,從而中斷圖片的加載。檢測滾動狀態,然后把可視網頁中的 img 的 src 屬性還原加載圖片,制造緩沖加載的效果。

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

問題原因:在新版的瀏覽器中,即使你刪除了 Javascript 控制的 src 屬性,瀏覽器仍然會去加載這個圖像。

解決方法:直接修改 HTML 的結構,在 img 標簽中添加新的屬性,把 src 屬性的值指向占位圖片,添加 data-original 屬性,讓其指向真正的圖像地址。

例如:<img data-original=“img/example.jpg” src=“img/grey.gif”>

這樣我們就需要先分析一下插件的優缺點,再決定是否要使用。

使用:

  1. 必須按照這種結構才有實際作用,需要對輸出進行定義。
  2. 可以節約服務器資源,并且有較好的用戶體驗。
  3. 如果圖片很大,當用戶滾動到目標位置,需要較長時間下載。

不使用:

  1. 增加服務器壓力,浪費系統資源。

究竟使用不使用,還是要看你自己的實際需求。如果你圖片比較少,就不必使用了,如果你圖片比較多,可以考慮一下。但是,使用的話,你可能需要把每一 個img 標簽上自己加上這個屬性,會稍微麻煩一點。潛行者m博客上,就用了這個插件,不過沒用使用官方說的那種結構,要的只是一個緩沖加載的效果。

開始使用 lazyload.js

第一步:加載相關文件。

很明顯,你要加載jquery和這個插件。你可以使用以下代碼,加載這幾個文件:

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

第二步:定義圖片結構。

按照官方的建議,定義你的img結構:

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

第三步:觸發這個插件,生效。

激活以下,你就可以在目標中使用了。

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

lazyload.js 高級使用方法:

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

更周全的做法

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

應對這個問題,我們需要引入 noscript 標簽。大體思路如下:用 noscript 包含真實的圖像位置,當瀏覽器不支持 Javascript,直接顯示圖像。對現有圖像,隱藏處理,使用 show() 方法觸發顯示。這樣,如果瀏覽器不支持 Javascript,我們自定義的 img 就不會出現,而顯示 noscript 里面的圖像。具體實現代碼如下:

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript> <script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>

提前加載

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

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

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

自定義觸發事件

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

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

自定義顯示效果

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

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

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

把圖像插入某個容器

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

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

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

加載不可見圖像

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

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

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 广东十一选五 皮皮四川麻将下载不了 有没有上下分手机麻将 城市猎人 湖人vs火箭 广西快乐双彩 澳洲幸运10微信群 一级黄色片电视 北京赛车 快播成人影院黄色片 a股指数 上证指数 3d今天的开机号和 西安沐足哪里有那个服务 吉林十一选五前三直 佐佐木明希唯一无码 山东11选5走势一