js懶加載
意義
懶加載（LazyLoad）是前端優(yōu)化的一種有效方式宠页，能極大的提升用戶(hù)體驗(yàn)蒸辆，圖片加載是其重點(diǎn)，如果加載圖片過(guò)多將大大增http請(qǐng)求次數(shù)或大小，然而更多時(shí)候用戶(hù)并不會(huì)瀏覽到全部加載進(jìn)來(lái)的圖片糠溜，這種代價(jià)是非常不值得的，所以當(dāng)用戶(hù)瀏覽到當(dāng)前視口時(shí)再去加載相應(yīng)的圖片無(wú)疑是兩全其美的選擇直撤。
原理
只有img標(biāo)簽中的src寫(xiě)入了圖片的地址非竿，加載頁(yè)面時(shí)才會(huì)請(qǐng)求圖片，所以使用懶加載時(shí)在src中并不寫(xiě)入任何地址谋竖，把圖片的真實(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為空锤悄，地址寫(xiě)在data-original中，onerror表示當(dāng)未加載圖片時(shí)顯示的臨時(shí)加載頁(yè)圖片
JavaScript
效果
當(dāng)圖片滾動(dòng)到視口范圍內(nèi)才會(huì)加載該圖片?
js預(yù)加載
意義
與懶加載相反嘉抒，有時(shí)我們需要實(shí)現(xiàn)例如快速快速切換頁(yè)面铁蹈、圖片之類(lèi)的功能時(shí)，能盡快的加載出我們所需的圖片會(huì)極大提升用戶(hù)體驗(yàn)，這時(shí)用預(yù)加載將圖片先緩存到瀏覽器握牧，用戶(hù)使用需顯示圖片時(shí)無(wú)疑會(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)來(lái)只不過(guò)讓其不顯示
2.使用Imgage對(duì)象
js中執(zhí)行到該語(yǔ)句后就會(huì)加載進(jìn)來(lái)
3.使用ajax請(qǐng)求圖片
直接用ajax請(qǐng)求很好理解不貼代碼容诬，
優(yōu)點(diǎn)：ajax請(qǐng)求過(guò)程中能有更加詳細(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)度和完成事件方面的更好支持措嵌，然而由于跨域的問(wèn)題躲叼，它可能仍然是優(yōu)選使用基于標(biāo)簽的負(fù)載代替
這是官網(wǎng)上的例子，使用起來(lái)也很簡(jiǎn)單企巢，對(duì)預(yù)加載過(guò)程有更高的控制枫慷，詳細(xì)了解請(qǐng)到官網(wǎng)學(xué)習(xí)
總結(jié)
預(yù)加載與懶加載的使用頻繁，理解起來(lái)也并不難浪规，簡(jiǎn)單學(xué)習(xí)之后做了此總結(jié)
王文健的博客筆記 ? 前端性能優(yōu)化——JS懶加載與預(yù)加載? ?
