懶加載和預加載的區別

懶加載:

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.懶加載的優勢是什麼？

頁面加載速度快、能夠減輕服務器的壓力、節約了流量,用戶體驗好

 

 1 //懶加載代碼實現
 2 var viewHeight = document.documentElement.clientHeight // 可視區域的高度
 3 
 4 function lazyload () {
 5 // 獲取全部要進行懶加載的圖片
 6 var eles = document.querySelectorAll('img[data-original][lazyload]')
 7 Array.prototype.forEach.call(eles, function (item, index) {
 8 var rect
 9 if (item.dataset.original === '')
10 return
11 rect = item.getBoundingClientRect()
12 // 圖片一進入可視區，動態加載
13 if (rect.bottom >= 0 && rect.top < viewHeight) {
14 !function () {
15 var img = new Image()
16 img.src = item.dataset.original
17 img.onload = function () {
18 item.src = img.src
19 }
20 item.removeAttribute('data-original')
21 item.removeAttribute('lazyload')
22 }()
23 }
24 })
25 }
26 // 首屏要人爲的調用，不然剛進入頁面不顯示圖片
27 lazyload()
28 
29 document.addEventListener('scroll', lazyload)

 

預加載

 1 預加載的核心要點以下：
 2 
 3 1.圖片等靜態資源在使用以前的提早請求；
 4 
 5 2.資源後續使用時能夠從緩存中加載，提高用戶體驗；
 6 
 7 3.頁面展現的依賴關係維護（必需的資源加載完才能夠展現頁面，防止白屏等）；
 8 
 9 實現預加載主要有三個方法：
10 
11 1.html中img標籤最初設置爲display:none；
12 
13 2.js腳本中使用image對象動態建立好圖片；
14 
15 3.使用XMLHttpRequest對象能夠更加精細的控制預加載過程，缺點是沒法跨域：

1.什麼是預加載？

提早加載圖片，當用戶須要查看時可直接從本地緩存中渲染

2.爲何要使用預加載？

圖片預先加載到瀏覽器中，訪問者即可順利地在你的網站上衝浪，並享受到極快的加載速度。這對圖片畫廊及圖片佔據很大比例的網站來講十分有利，它保證了圖片快速、無縫地發佈，也可幫助用戶在瀏覽你網站內容時得到更好的用戶體驗。

3.實現預加載的方法有哪些？

方法一：用CSS和JavaScript實現預加載
方法二：僅使用JavaScript實現預加載
方法三：使用Ajax實現預加載

詳見：http://web.jobbole.com/86785/

三、懶加載和預加載的對比

1)概念：
懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時才加載某些圖片。
預加載：提早加載圖片，當用戶須要查看時可直接從本地緩存中渲染。

2)區別：
兩種技術的本質：二者的行爲是相反的，一個是提早加載，一個是遲緩甚至不加載。懶加載對服務器前端有必定的緩解壓力做用，預加載則會增長服務器前端壓力。

3)懶加載的意義及實現方式有：
意義：
懶加載的主要目的是做爲服務器前端的優化，減小請求數或延遲請求數。
實現方式：
1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.
2.第二種是條件加載，符合某些條件，或觸發了某些事件纔開始異步下載。
3.第三種是可視區加載，即僅加載用戶能夠看到的區域，這個主要由監控滾動條來實現，通常會在距用戶看到某圖片前必定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。

4)預加載的意義及實現方式有：
意義:
預加載能夠說是犧牲服務器前端性能，換取更好的用戶體驗，這樣可使用戶的操做獲得最快的反映。
實現方式：
實現預載的方法很是多，好比：用CSS和JavaScript實現預加載；僅使用JavaScript實現預加載；使用Ajax實現預加載。
經常使用的是new Image();設置其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，一樣的src就會使用緩存，這是最基本也是最實用的預載方法。當Image下載完圖片頭後，會獲得寬和高，所以能夠在預載前獲得圖片的大小(方法是用記時器輪循寬高變化)。

四、補充知識

屏幕可視窗口大小

 

 1 原生方法：
 2 
 3 window.innerHeight 標準瀏覽器及IE9+ ||
 4 
 5 document.documentElement.clientHeight 標準瀏覽器及低版本IE標準模式 ||
 6 
 7 document.body.clientHeight 低版本混雜模式
 8 
 9 jQuery方法：
10 
11 $(window).height();

瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離：

 

 1 原生方法：
 2 
 3 window.pagYoffset 標準瀏覽器及IE9+ ||
 4 
 5 document.documentElement.scrollTop 兼容ie低版本的標準模式 ||
 6 
 7 document.body.scrollTop 兼容混雜模式；
 8 
 9 jQuery方法：
10 
11 $(document).scrollTop();

 

獲取元素的尺寸

1 $(o).width() = o.style.width;
2 $(o).innerWidth() = o.style.width+o.style.padding;
3 $(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border；
4 $(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin；

注意
要使用原生的style.xxx方法獲取屬性，這個元素必須已經有內嵌的樣式，如

；
若是原先是經過外部或內部樣式表定義css樣式，必須使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]來獲取樣式值。

獲取元素的位置信息

1 jQuery：
2 $(o).offset().top</code>元素距離文檔頂的距離<br><code>$(o).offset().left
3 元素距離文檔左邊緣的距離。
4 原生：getoffsetTop();
5 順便提一下返回元素相對於第一個以定位的父元素的偏移距離，注意與上面偏移距的區別；
6 jQuery：position()返回一個對象
7 $(o).position().left = o.style.left;</code><br><code>$(o).position().top = o.style.top； 

 

參考博客：https://blog.csdn.net/wujinpengjiusan/article/details/89513156