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