js懶加載
意義
懶加載（LazyLoad）是前端優(yōu)化的一種有效方式鸭廷，能極大的提升用戶體驗象颖，圖片加載是其重點偷卧，如果加載圖片過多將大大增http請求次數(shù)或大小豺瘤，然而更多時候用戶并不會瀏覽到全部加載進來的圖片，這種代價是非常不值得的听诸，所以當(dāng)用戶瀏覽到當(dāng)前視口時再去加載相應(yīng)的圖片無疑是兩全其美的選擇坐求。
原理
只有img標簽中的src寫入了圖片的地址，加載頁面時才會請求圖片晌梨，所以使用懶加載時在src中并不寫入任何地址桥嗤，把圖片的真實地址放到data- (標簽內(nèi)部屬性可存數(shù)據(jù))屬性中，在js中綁定鼠標滾動事件仔蝌，其回調(diào)中遍歷所有圖片并作出判斷泛领，將出現(xiàn)在視口中的圖片的 'data-' 屬性保存的地址放到 'src' 中即可
實現(xiàn)
實現(xiàn)方式：原生js
HTML
JavaScript
效果
js預(yù)加載
意義
與懶加載相反渊鞋，有時我們需要實現(xiàn)例如快速快速切換頁面、圖片之類的功能時瞧挤，能盡快的加載出我們所需的圖片會極大提升用戶體驗锡宋，這時用預(yù)加載將圖片先緩存到瀏覽器，用戶使用需顯示圖片時無疑會順暢很多
原理
在html中用img標簽
使用JavaScript的Imgage對象
ajax請求圖片
preload.js插件
實現(xiàn)
1.使用html文檔中img標簽
2.使用Imgage對象
3.使用ajax請求圖片
直接用ajax請求很好理解不貼代碼特恬，
優(yōu)點：ajax請求過程中能有更加詳細的操作
缺點：有跨域
4.?preload.js預(yù)加載插件
PreloadJS便于預(yù)先加載資源：圖像员辩、聲音、數(shù)據(jù)鸵鸥、或其他的JS
PreloadJS插件地址：http://www.createjs.cc/preloadjs/
PreloadJS提供了一個一致的方式預(yù)先加載在HTML應(yīng)用的內(nèi)容奠滑，以及預(yù)加載可以使用HTML標簽作為XHR完成。默認妒穴， PreloadJS 將嘗試使用XHR加載內(nèi)容宋税，因為它提供了進度和完成事件方面的更好支持，然而由于跨域的問題讼油，它可能仍然是優(yōu)選使用基于標簽的負載代替
總結(jié)
預(yù)加載與懶加載的使用頻繁乏屯，理解起來也并不難根时，簡單學(xué)習(xí)之后做了此總結(jié)
