一、懶加載
【1.1】什么是懶加載？
懶加載也就是延遲加載，指的是在長網(wǎng)頁中延遲加載圖像，是一種很好優(yōu)化網(wǎng)頁性能的方式。當(dāng)訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次，俗稱占位圖），只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時，才設(shè)置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
【1.2】為什么要懶加載？
當(dāng)很多頁面，內(nèi)容很豐富，頁面很長，圖片較多的時候。比如說各種商城頁面。這些頁面圖片數(shù)量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載所有圖片，等待時間很長，用戶難免會心生抱怨，這就嚴(yán)重影響用戶體驗。
【1.3】懶加載的原理
頁面中的img元素，如果沒有src屬性，瀏覽器就不會發(fā)出請求去下載圖片，只有通過javascript設(shè)置了圖片路徑，瀏覽器才會發(fā)送請求。懶加載的原理就是先在頁面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位，把真正的路徑存在元素的“data-src”（這個名字起個自己認(rèn)識好記的就行）屬性里，要用的時候就取出來，再設(shè)置；
【1.4】懶加載的優(yōu)點
頁面加載速度快、可以減輕服務(wù)器的壓力、節(jié)約了流量，用戶體驗好
【1.5】懶加載實現(xiàn)方式
方法一：純粹的延遲加載，使用setTimeOut或setInterval進(jìn)行加載延遲.
方法二：條件加載，符合某些條件，或觸發(fā)了某些事件才開始異步下載。
方法三：可視區(qū)加載，即僅加載用戶可以看到的區(qū)域，這個主要由監(jiān)控滾動條來實現(xiàn)，一般會在距用戶看到某圖片前一定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>Document</title>
<style>
.image-item {
display: block;
margin-bottom: 50px;
/* 一定記得設(shè)置圖片高度 */
height: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<img class="image-item" src="" data-src="images/1.jpg" alt="" />
<img class="image-item" src="" data-src="images/2.jpg" alt="" />
<img class="image-item" src="" data-src="images/3.jpg" alt="" />
<img class="image-item" src="" data-src="images/4.jpg" alt="" />
<img class="image-item" src="" data-src="images/5.jpg" alt="" />
<img class="image-item" src="" data-src="images/6.jpg" alt="" />
<img class="image-item" src="" data-src="images/7.jpg" alt="" />
<img class="image-item" src="" data-src="images/8.jpg" alt="" />
<img class="image-item" src="" data-src="images/9.jpg" alt="" />
<img class="image-item" src="" data-src="images/10.jpg" alt="" />
</div>
<script>
// 首先獲得頁面當(dāng)中所有的圖片
let img = document.getElementsByTagName("img");
//存儲圖片加裁到的位置，避免每次都從第一 張圖片開始遍歷
let n = 0;
//頁面載入完畢加載可視區(qū)域內(nèi)的圖片
lazyload();
//注冊滾動條滾動事件
window.onscroll = lazyload;
//監(jiān)聽頁面滾動事件
function lazyload() {
//可見區(qū)域高度
let seeHeight = document.documentElement.clientHeight;
/*滾動條距離頂部高度
* Chrome: document.body.scrollTop
* FF: document.documentElement.scrollTop
**/
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = n; i < img.length; i++) {
// 當(dāng)前圖片相對于頁面頂部的距離 <= 可視區(qū)域+滾動條距離距離頂部的距離
if (img[i].offsetTop < seeHeight + scrollTop - 100) {
//將img[i]的src設(shè)置 成img[i]的data-src
if (img[i].getAttribute("src") == "") {
img[i].src = img[i].getAttribute("data-src");
n = i + 1;
}
}
}
}
</script>
</body>
</html>
二、預(yù)加載
【2.1】什么是預(yù)加載？
提前加載圖片，當(dāng)用戶需要查看時可直接從本地緩存中渲染
【2.2】為什么要預(yù)加載？
在網(wǎng)頁全部加載之前，對一些主要內(nèi)容進(jìn)行加載，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內(nèi)容過于龐大，沒有使用預(yù)加載技術(shù)的頁面就會長時間的展現(xiàn)為一片空白，直到所有內(nèi)容加載完畢。圖片預(yù)先加載到瀏覽器中，訪問者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。這對圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速、無縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時獲得更好的用戶體驗。
【2.3】預(yù)加載的優(yōu)點
預(yù)加載可以說是犧牲服務(wù)器前端性能，換取更好的用戶體驗，這樣可以使用戶的操作得到最快的反映。
【2.4】預(yù)加載實現(xiàn)方式
方法一：CSS方式實現(xiàn)預(yù)加載，隱藏在css的background的url屬性里面
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
方法二：JavaScript實現(xiàn)預(yù)加載，通過javascript的Image對象設(shè)置實例對象的src屬性實現(xiàn)圖片的預(yù)加載
function preloadImg(url) {
var img = new Image();
img.src = url;
if(img.complete) {
//接下來可以使用圖片了
//do something here
} else {
img.onload = function() {
//接下來可以使用圖片了
//do something here
};
}
}
三、懶加載和預(yù)加載的對比
兩者都是提高頁面性能有效的辦法，兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。
四、補(bǔ)充知識
【4.1】原生方法
document.body.clientWidth // body對象寬度
document.body.clientHeight // body對象高度
document.documentElement.clientWidth // 可見區(qū)域?qū)挾? document.documentElement.clientHeight // 可見區(qū)域高度
document.body.clientWidth // 網(wǎng)頁可見區(qū)域?qū)? document.body.clientHeight // 網(wǎng)頁可見區(qū)域高
document.body.offsetWidth // 網(wǎng)頁可見區(qū)域?qū)?包括邊線的寬)
document.body.offsetHeight // 網(wǎng)頁可見區(qū)域高(包括邊線的高)
document.body.scrollWidth // 網(wǎng)頁正文全文寬document.body.scrollHeight // 網(wǎng)頁正文全文高
document.body.scrollTop // 網(wǎng)頁被卷去的高
document.body.scrollLeft // 網(wǎng)頁被卷去的左
window.screenTop // 網(wǎng)頁正文部分上
window.screenLeft // 網(wǎng)頁正文部分左
window.screen.height // 屏幕分辨率的高
window.screen.width // 屏幕可用工作區(qū)高度
window.screen.availHeight // 屏幕可用工作區(qū)高度
window.screen.availWidth // 屏幕可用工作區(qū)寬度
scrollHeight // 獲取對象的滾動高度。
scrollLeft // 設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop // 設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth // 獲取對象的滾動寬度
offsetHeight // 獲取對象相對于版面或由父坐標(biāo)offsetParent屬性指定的父坐標(biāo)的高度
offsetLeft // 獲取對象相對于版面或由父坐標(biāo)offsetParent屬性指定的父坐標(biāo)的計算左側(cè)位置
offsetTop // 獲取對象相對于版面或由父坐標(biāo)offsetTop屬性指定的父坐標(biāo)的計算頂端位置
event.clientX // 相對文檔的水平座標(biāo)
event.clientY // 相對文檔的垂直座標(biāo)
event.offsetX // 相對容器的水平坐標(biāo)
event.offsetY // 相對容器的垂直坐標(biāo)
document.documentElement.scrollTop // 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop // 相對文檔的水平座標(biāo)+垂直方向滾動的量
// 屏幕可視窗口大?。嫒荩? window.innerHeight // 標(biāo)準(zhǔn)瀏覽器及IE9+
document.documentElement.clientHeight // 標(biāo)準(zhǔn)瀏覽器及低版本IE標(biāo)準(zhǔn)模式
document.body.clientHeight // 低版本混雜模式
// 瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離（兼容）
window.pagYoffset // 標(biāo)準(zhǔn)瀏覽器及IE9+
document.documentElement.scrollTop // 兼容ie低版本的標(biāo)準(zhǔn)模式
document.body.scrollTop // 兼容混雜模式
【4.2】jQuery方法
$(window).height() // 瀏覽器時下窗口可視區(qū)域高度
$(document).height() // 瀏覽器時下窗口文檔的高度
$(document.body).height() // 瀏覽器時下窗口文檔body的高度
$(document.body).outerHeight(true) // 瀏覽器時下窗口文檔body的總高度 包括border padding margin
$(window).width() // 瀏覽器時下窗口可視區(qū)域?qū)挾?
$(document).width() // 瀏覽器時下窗口文檔對于象寬度
$(document.body).width() // 瀏覽器時下窗口文檔body的高度
$(document.body).outerWidth(true) // 瀏覽器時下窗口文檔body的總寬度 包括border padding
$(document).scrollTop(); //獲取滾動條到頂部的垂直高度
$(document).scrollLeft(); //獲取滾動條到左邊的垂直寬度
【4.3】直觀圖展示
?
文章每周持續(xù)更新，可以微信搜索「 前端大集錦 」第一時間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料
