懶加載
js懶加載
意義
懶加載（LazyLoad）是前端優(yōu)化的一種有效方式央渣，能極大的提升用戶體驗(yàn)计盒，圖片加載是其重點(diǎn)，如果加載圖片過多將大大增http請(qǐng)求次數(shù)或大小芽丹，然而更多時(shí)候用戶并不會(huì)瀏覽到全部加載進(jìn)來的圖片北启，這種代價(jià)是非常不值得的，所以當(dāng)用戶瀏覽到當(dāng)前視口時(shí)再去加載相應(yīng)的圖片無疑是兩全其美的選擇拔第。
原理
只有img標(biāo)簽中的src寫入了圖片的地址咕村，加載頁面時(shí)才會(huì)請(qǐng)求圖片，所以使用懶加載時(shí)在src中并不寫入任何地址蚊俺，把圖片的真實(shí)地址放到data- (標(biāo)簽內(nèi)部屬性可存數(shù)據(jù))屬性中懈涛，在js中綁定鼠標(biāo)滾動(dòng)事件，其回調(diào)中遍歷所有圖片并作出判斷春叫，將出現(xiàn)在視口中的圖片的 'data-' 屬性保存的地址放到 'src' 中即可
實(shí)現(xiàn)
實(shí)現(xiàn)方式：原生js
HTML
引入一堆圖片src為空肩钠，地址寫在data-original中，onerror表示當(dāng)未加載圖片時(shí)顯示的臨時(shí)加載頁圖片
JavaScript
效果
當(dāng)圖片滾動(dòng)到視口范圍內(nèi)才會(huì)加載該圖片?
js預(yù)加載
意義
與懶加載相反暂殖，有時(shí)我們需要實(shí)現(xiàn)例如快速快速切換頁面价匠、圖片之類的功能時(shí)，能盡快的加載出我們所需的圖片會(huì)極大提升用戶體驗(yàn)呛每，這時(shí)用預(yù)加載將圖片先緩存到瀏覽器踩窖，用戶使用需顯示圖片時(shí)無疑會(huì)順暢很多
原理
在html中用img標(biāo)簽
使用JavaScript的Imgage對(duì)象
ajax請(qǐng)求圖片
preload.js插件
實(shí)現(xiàn)
1.使用html文檔中img標(biāo)簽
執(zhí)行文檔時(shí)直接加載進(jìn)來只不過讓其不顯示
2.使用Imgage對(duì)象
js中執(zhí)行到該語句后就會(huì)加載進(jìn)來
3.使用ajax請(qǐng)求圖片
直接用ajax請(qǐng)求很好理解不貼代碼，
優(yōu)點(diǎn)：ajax請(qǐng)求過程中能有更加詳細(xì)的操作
缺點(diǎn)：有跨域
4. preload.js預(yù)加載插件
PreloadJS便于預(yù)先加載資源：圖像晨横、聲音洋腮、數(shù)據(jù)、或其他的JS
PreloadJS插件地址：http://www.createjs.cc/preloadjs/
PreloadJS提供了一個(gè)一致的方式預(yù)先加載在HTML應(yīng)用的內(nèi)容手形，以及預(yù)加載可以使用HTML標(biāo)簽作為XHR完成啥供。默認(rèn)， PreloadJS 將嘗試使用XHR加載內(nèi)容库糠，因?yàn)樗峁┝诉M(jìn)度和完成事件方面的更好支持伙狐，然而由于跨域的問題，它可能仍然是優(yōu)選使用基于標(biāo)簽的負(fù)載代替
這是官網(wǎng)上的例子，使用起來也很簡單贷屎，對(duì)預(yù)加載過程有更高的控制罢防，詳細(xì)了解請(qǐng)到官網(wǎng)學(xué)習(xí)
總結(jié)
預(yù)加載與懶加載的使用頻繁，理解起來也并不難唉侄，簡單學(xué)習(xí)之后做了此總結(jié)
吝征宇的博客筆記 ? 前端性能優(yōu)化——JS懶加載與預(yù)加載? ?
