懶加載和預加載
1、懶加載
1.什麽是懶加載？
懶加載也就是延遲加載。
當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次，俗稱占位圖），只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
2.為什麽要使用懶加載？
很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載完畢。估計大家都會等到黃花變成黃花菜了。
3.懶加載的原理是什麽？
頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有通過javascript設置了圖片路徑，瀏覽器才會發送請求。
懶加載的原理就是先在頁面中把所有的圖片統一使用一張占位圖進行占位，把正真的路徑存在元素的“data-url”（這個名字起個自己認識好記的就行）屬性裏，要用的時候就取出來，再設置；
4.懶加載的實現步驟？
1)首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。
2)頁面加載完成後，根據scrollTop判斷圖片是否在用戶的視野內，如果在，則將data-original屬性中的值取出存放到src屬性中。
3)在滾動事件中重復判斷圖片是否進入視野，如果進入，則將data-original屬性中的值取出存放到src屬性中。
5.懶加載的優點是什麽？
頁面加載速度快、可以減輕服務器的壓力、節約了流量,用戶體驗好
2、預加載
1.什麽是預加載？
提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染
2.為什麽要使用預加載？
圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上沖浪，並享受到極快的加載速度。這對圖片畫廊及圖片占據很大比例的網站來說十分有利，它保證了圖片快速、無縫地發布，也可幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗。
3.實現預加載的方法有哪些？
方法一：用CSS和JavaScript實現預加載
方法二：僅使用JavaScript實現預加載
方法三：使用Ajax實現預加載
詳見：http://web.jobbole.com/86785/
3、懶加載和預加載的對比
1)概念：
懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時才加載某些圖片。
預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。
2)區別：
兩種技術的本質：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。
3)懶加載的意義及實現方式有：
意義：
懶加載的主要目的是作為服務器前端的優化，減少請求數或延遲請求數。
實現方式：
1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.
2.第二種是條件加載，符合某些條件，或觸發了某些事件才開始異步下載。
3.第三種是可視區加載，即僅加載用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。
4)預加載的意義及實現方式有：
意義:
預加載可以說是犧牲服務器前端性能，換取更好的用戶體驗，這樣可以使用戶的操作得到最快的反映。
實現方式：
實現預載的方法非常多，比如：用CSS和JavaScript實現預加載；僅使用JavaScript實現預加載；使用Ajax實現預加載。
常用的是new Image();設置其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，同樣的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方法獲取屬性，這個元素必須已經有內嵌的樣式，如`<div style="...."></div>`；
如果原先是通過外部或內部樣式表定義css樣式，必須使用`o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]`來獲取樣式值。
- 獲取元素的位置信息
jQuery：
$(o).offset().top元素距離文檔頂的距離
$(o).offset().left元素距離文檔左邊緣的距離。
原生：getoffsetTop();
順便提一下返回元素相對於第一個以定位的父元素的偏移距離，註意與上面偏移距的區別；
jQuery：position()返回一個對象
$(o).position().left = o.style.left;
$(o).position().top = o.style.top；
作者：xiaolizhenzhen
鏈接：https://www.jianshu.com/p/4876a4fe7731
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
懶加載和預加載