1、懶加載
1.什么是懶加載？
懶加載也就是延遲加載。當(dāng)訪問(wèn)一個(gè)頁(yè)面的時(shí)候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請(qǐng)求一次，俗稱占位圖），只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，才設(shè)置圖片正真的路徑，讓圖片顯示出來(lái)。這就是圖片懶加載。
2.為什么要使用懶加載？
很多頁(yè)面，內(nèi)容很豐富，頁(yè)面很長(zhǎng)，圖片較多。比如說(shuō)各種商城頁(yè)面。這些頁(yè)面圖片數(shù)量多，而且比較大，少說(shuō)百來(lái)K，多則上兆。要是頁(yè)面載入就一次性加載完畢。估計(jì)大家都會(huì)等到黃花變成黃花菜了。
3.懶加載的原理是什么？
頁(yè)面中的img元素，如果沒(méi)有src屬性，瀏覽器就不會(huì)發(fā)出請(qǐng)求去下載圖片，只有通過(guò)javascript設(shè)置了圖片路徑，瀏覽器才會(huì)發(fā)送請(qǐng)求。懶加載的原理就是先在頁(yè)面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位，把正真的路徑存在元素的“data-url”（這個(gè)名字起個(gè)自己認(rèn)識(shí)好記的就行）屬性里，要用的時(shí)候就取出來(lái)，再設(shè)置；
4.懶加載的實(shí)現(xiàn)步驟？
1)首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。2)頁(yè)面加載完成后，根據(jù)scrollTop判斷圖片是否在用戶的視野內(nèi)，如果在，則將data-original屬性中的值取出存放到src屬性中。3)在滾動(dòng)事件中重復(fù)判斷圖片是否進(jìn)入視野，如果進(jìn)入，則將data-original屬性中的值取出存放到src屬性中。
5.懶加載的優(yōu)點(diǎn)是什么？
頁(yè)面加載速度快、可以減輕服務(wù)器的壓力、節(jié)約了流量,用戶體驗(yàn)好
2、預(yù)加載
1.什么是預(yù)加載？
提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染
2.為什么要使用預(yù)加載？
圖片預(yù)先加載到瀏覽器中，訪問(wèn)者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。這對(duì)圖片畫(huà)廊及圖片占據(jù)很大比例的網(wǎng)站來(lái)說(shuō)十分有利，它保證了圖片快速、無(wú)縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)。
3.實(shí)現(xiàn)預(yù)加載的方法有哪些？
方法一：用CSS和JavaScript實(shí)現(xiàn)預(yù)加載方法二：僅使用JavaScript實(shí)現(xiàn)預(yù)加載方法三：使用Ajax實(shí)現(xiàn)預(yù)加載
詳見(jiàn)：http://web.jobbole.com/86785/
3、懶加載和預(yù)加載的對(duì)比
1)概念：懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時(shí)才加載某些圖片。預(yù)加載：提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染。
2)區(qū)別：兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。
3)懶加載的意義及實(shí)現(xiàn)方式有：意義：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)。實(shí)現(xiàn)方式：1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進(jìn)行加載延遲.2.第二種是條件加載，符合某些條件，或觸發(fā)了某些事件才開(kāi)始異步下載。3.第三種是可視區(qū)加載，即僅加載用戶可以看到的區(qū)域，這個(gè)主要由監(jiān)控滾動(dòng)條來(lái)實(shí)現(xiàn)，一般會(huì)在距用戶看到某圖片前一定距離遍開(kāi)始加載，這樣能保證用戶拉下時(shí)正好能看到圖片。
4)預(yù)加載的意義及實(shí)現(xiàn)方式有：意義:預(yù)加載可以說(shuō)是犧牲服務(wù)器前端性能，換取更好的用戶體驗(yàn)，這樣可以使用戶的操作得到最快的反映。實(shí)現(xiàn)方式：實(shí)現(xiàn)預(yù)載的方法非常多，比如：用CSS和JavaScript實(shí)現(xiàn)預(yù)加載；僅使用JavaScript實(shí)現(xiàn)預(yù)加載；使用Ajax實(shí)現(xiàn)預(yù)加載。常用的是new Image();設(shè)置其src來(lái)實(shí)現(xiàn)預(yù)載，再使用onload方法回調(diào)預(yù)載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會(huì)使用緩存，這是最基本也是最實(shí)用的預(yù)載方法。當(dāng)Image下載完圖片頭后，會(huì)得到寬和高，因此可以在預(yù)載前得到圖片的大小(方法是用記時(shí)器輪循寬高變化)。
4、補(bǔ)充知識(shí)
屏幕可視窗口大小原生方法： window.innerHeight 標(biāo)準(zhǔn)瀏覽器及IE9+ || document.documentElement.clientHeight 標(biāo)準(zhǔn)瀏覽器及低版本IE標(biāo)準(zhǔn)模式 || document.body.clientHeight 低版本混雜模式 jQuery方法： $(window).height();
瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動(dòng)條滾動(dòng)的距離：
原生方法：
window.pagYoffset 標(biāo)準(zhǔn)瀏覽器及IE9+ ||
document.documentElement.scrollTop 兼容ie低版本的標(biāo)準(zhǔn)模式 ||
document.body.scrollTop 兼容混雜模式； **jQuery方法**：
$(document).scrollTop();
獲取元素的尺寸
$(o).width() = o.style.width;$(o).innerWidth() =
o.style.width+o.style.padding;$(o).outerWidth() = o.offsetWidth =
o.style.width+o.style.padding+o.style.border；$(o).outerWidth(true) =
o.style.width+o.style.padding+o.style.border+o.style.margin；
注意要使用原生的style.xxx方法獲取屬性，這個(gè)元素必須已經(jīng)有內(nèi)嵌的樣式，如<div style="...."></div>
；
如果原先是通過(guò)外部或內(nèi)部樣式表定義css樣式，必須使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]
來(lái)獲取樣式值。
獲取元素的位置信息jQuery：$(o).offset().top
元素距離文檔頂?shù)木嚯x$(o).offset().left
元素距離文檔左邊緣的距離。原生：getoffsetTop();
順便提一下返回元素相對(duì)于第一個(gè)以定位的父元素的偏移距離，注意與上面偏移距的區(qū)別；jQuery：position()
返回一個(gè)對(duì)象$(o).position().left = o.style.left;
$(o).position().top = o.style.top；
作者：xiaolizhenzhen鏈接：http://www.itdecent.cn/p/4876a4fe7731來(lái)源：簡(jiǎn)書(shū)著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
