今天看了一片關(guān)于圖片延遲加載的文章闷祥，我也是把我的一部分經(jīng)驗(yàn)給寫一下吧娱颊。
項(xiàng)目中其實(shí)用的最多的就是lazyload.js這個(gè)文件了傲诵，用它來(lái)實(shí)現(xiàn)延遲加載，我看了一些新人還不是很會(huì)使用這款插件箱硕，那我這里就大概講一下拴竹。
Lazy Load 插件原理
修改目標(biāo) img 的 src 屬性為 orginal 屬性，從而中斷圖片的加載剧罩。檢測(cè)滾動(dòng)狀態(tài)栓拜，然后把可視網(wǎng)頁(yè)中的 img 的 src 屬性還原加載圖片，制造緩沖加載的效果惠昔。
但是現(xiàn)在幕与，很多javascript大牛分析得出，這個(gè)插件其實(shí)并沒(méi)有真正的緩加載效果镇防。確實(shí)是這樣啦鸣，官方也已經(jīng)給出了說(shuō)明和解決方法了。
問(wèn)題原因：在新版的瀏覽器中来氧，即使你刪除了 Javascript 控制的 src 屬性诫给，瀏覽器仍然會(huì)去加載這個(gè)圖像。
解決方法：直接修改 HTML 的結(jié)構(gòu)啦扬，在 img 標(biāo)簽中添加新的屬性中狂，把 src 屬性的值指向占位圖片，添加 data-original 屬性扑毡，讓其指向真正的圖像地址胃榕。
例如：<img data-original=“img/example.jpg” src=“img/grey.gif”>
這樣我們就需要先分析一下插件的優(yōu)缺點(diǎn)，再?zèng)Q定是否要使用僚楞。
使用：
必須按照這種結(jié)構(gòu)才有實(shí)際作用勤晚，需要對(duì)輸出進(jìn)行定義。
可以節(jié)約服務(wù)器資源泉褐，并且有較好的用戶體驗(yàn)赐写。
如果圖片很大，當(dāng)用戶滾動(dòng)到目標(biāo)位置膜赃，需要較長(zhǎng)時(shí)間下載挺邀。
不使用：
增加服務(wù)器壓力，浪費(fèi)系統(tǒng)資源跳座。
究竟使用不使用端铛，還是要看你自己的實(shí)際需求。如果你圖片比較少疲眷，就不必使用了禾蚕，如果你圖片比較多，可以考慮一下狂丝。但是换淆，使用的話哗总，你可能需要把每一 個(gè)img 標(biāo)簽上自己加上這個(gè)屬性，會(huì)稍微麻煩一點(diǎn)倍试。潛行者m博客上讯屈，就用了這個(gè)插件，不過(guò)沒(méi)用使用官方說(shuō)的那種結(jié)構(gòu)县习，要的只是一個(gè)緩沖加載的效果涮母。
開(kāi)始使用 lazyload.js
第一步：加載相關(guān)文件。
很明顯躁愿，你要加載jquery和這個(gè)插件叛本。你可以使用以下代碼，加載這幾個(gè)文件：
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
第二步：定義圖片結(jié)構(gòu)攘已。
按照官方的建議炮赦，定義你的img結(jié)構(gòu)：
第三步：觸發(fā)這個(gè)插件，生效样勃。
激活以下吠勘，你就可以在目標(biāo)中使用了。
$("img.lazy").lazyload();
lazyload.js 高級(jí)使用方法：
下面部分來(lái)自官方文檔峡眶，將官方文檔進(jìn)行了一下簡(jiǎn)單的翻譯剧防。更周全的做法
我們不得不思考這樣一個(gè)問(wèn)題。我們定義了這樣一個(gè)結(jié)構(gòu)辫樱，那么網(wǎng)頁(yè)中峭拘，就不會(huì)加載源圖像了。只有當(dāng) Javascript 執(zhí)行狮暑，才會(huì)顯示這個(gè)源圖像鸡挠。如果用戶的瀏覽器不支持或者用戶關(guān)掉了支持 Javascript 的選項(xiàng)，那么我們的這個(gè)圖像就無(wú)法顯示出來(lái)搬男。也就是說(shuō)拣展，如果沒(méi)有 Javascript 的支持，我們的圖像就無(wú)法顯示出來(lái)缔逛。
應(yīng)對(duì)這個(gè)問(wèn)題备埃，我們需要引入 noscript 標(biāo)簽。大體思路如下：用 noscript 包含真實(shí)的圖像位置褐奴，當(dāng)瀏覽器不支持 Javascript按脚，直接顯示圖像。對(duì)現(xiàn)有圖像敦冬，隱藏處理辅搬，使用 show() 方法觸發(fā)顯示。這樣脖旱，如果瀏覽器不支持 Javascript伞辛，我們自定義的 img 就不會(huì)出現(xiàn)烂翰，而顯示 noscript 里面的圖像。具體實(shí)現(xiàn)代碼如下：
<noscript><imgsrc="img/example.jpg" width="640" heigh="480"></noscript>
<script type="text/javascript">
$("img.lazy").show().lazyload();
</script>
提前加載
默認(rèn)的情況是蚤氏，當(dāng)你滾動(dòng)到圖片位置的時(shí)候，插件開(kāi)始加載踊兜。這樣竿滨，用戶可能首先看到的是一個(gè)空白圖像，然后再緩慢出現(xiàn)捏境。如果你想在用戶滾動(dòng)之前于游，提前加載這個(gè)圖像，你可以配置一下參數(shù)垫言。
$("img.lazy").lazyload({ threshold : 200 });
threshold 這個(gè)參數(shù)贰剥，就是用來(lái)提前加載的。上面這個(gè)語(yǔ)句的意思是筷频，當(dāng)距離圖片還有200像素的時(shí)候蚌成，就開(kāi)始加載圖片。
自定義觸發(fā)事件
默認(rèn)的觸發(fā)事件凛捏，是滾動(dòng)担忧，當(dāng)你滾動(dòng)的時(shí)候，就會(huì)檢查然后加載坯癣。你可以使用event屬性瓶盛，設(shè)置你自己的加載事件，之后你可以自定義觸發(fā)這個(gè)事件的條件示罗，然后去加載圖像惩猫。
$(
"img.lazy"
).lazyload({ event :
"click"
});
自定義顯示效果
默認(rèn)的圖片實(shí)現(xiàn)效果，就是沒(méi)有效果蚜点，下載完成之后轧房，直接顯示出來(lái)。這樣的用戶體驗(yàn)并不好禽额，你可以設(shè)置 effect 屬性锯厢，來(lái)控制顯示圖片的效果。例如
$("img.lazy").lazyload({ effect :"fadeIn"});
fadeIn的效果就是脯倒，改變圖片的透明度实辑，漸現(xiàn)的方式出現(xiàn)。效果：
effect demo page
把圖像插入某個(gè)容器
大家如果使用智能手機(jī)的話藻丢，經(jīng)常去應(yīng)用網(wǎng)站下載應(yīng)用剪撬，他們通常使用一個(gè)橫著的容器，放一些手機(jī)截圖悠反。使用 container 屬性残黑，能很輕松在容器中實(shí)現(xiàn)緩沖加載馍佑。首先，我們需要用css定義這個(gè)容器梨水，然后用這個(gè)插件進(jìn)行加載拭荤。效果： vertical
#container {
height:600px;
overflow:scroll;
}
$("img.lazy").lazyload({ container: $("#container")});
加載不可見(jiàn)圖像
有部分圖像是不可見(jiàn)的，我們對(duì)其加上類似 display：none 等屬性的圖像疫诽。默認(rèn)的情況下舅世，這個(gè)插件是不會(huì)加載隱藏的不可見(jiàn)圖像。如果我們需要用它加載不可見(jiàn)圖像奇徒，我們需要將 skip_invisible 設(shè)置為 false
$("img.lazy").lazyload({ skip_invisible :false});
