1搁痛、什么是懶加載长搀？
懶加載就是延遲加載的意思，比如我們加載一個頁面鸡典，這個頁面很長很長源请，長到我們的瀏覽器可視區(qū)域裝不下，那么懶加載就是優(yōu)先加載可視區(qū)域的內(nèi)容彻况，其他部分等進入了可視區(qū)域在加載谁尸。
2、為什么要懶加載纽甘？
懶加載是一種網(wǎng)頁性能優(yōu)化的方式良蛮，它能極大的提升用戶體驗。就比如說圖片悍赢，圖片一直是影響網(wǎng)頁性能的主要元兇决瞳，現(xiàn)在一張圖片超過幾兆已經(jīng)是很經(jīng)常的事了。如果每次進入頁面就請求所有的圖片資源左权，那么可能等圖片加載出來用戶也早就走了皮胡。所以，我們需要懶加載涮总，進入頁面的時候，只請求可視區(qū)域的圖片資源祷舀。
總結(jié)兩個點：
- 全部加載的話會影響用戶體驗
- 浪費用戶的流量瀑梗，有些用戶并不像全部看完烹笔，全部加載會耗費大量流量。
3抛丽、懶加載實現(xiàn)原理谤职？
原理：大家都知道，一張圖片就是一個 <img> 標簽亿鲜，而圖片的來源主要是 src 屬性允蜈。瀏覽器是否發(fā)起親求就是根據(jù)是否有 src 屬性決定的。
既然這樣蒿柳，那么我們就要對 <img /> 標簽的 src 屬性下手了饶套，在沒進入可視區(qū)域的時候，我們先不給這個 <img />標簽賦 src 屬性垒探，這樣豈不是瀏覽器就不會發(fā)送請求了妓蛮。
我們知道了從 <img> 標簽下手，那么更重要的就是可視區(qū)域的判斷了圾叼。
4蛤克、與懶加載有關(guān)的 API
① 獲取屏幕可視區(qū)的高度
document.documentElement.clientHeight
MDN：這個屬性是只讀屬性，對于沒有定義 CSS 或者內(nèi)聯(lián)布局盒子的元素為 0夷蚊，否則构挤，它是元素內(nèi)部的高度（單位像素），包含內(nèi)邊距惕鼓，但不包括滾動條筋现、邊框和外邊距。
② 獲取元素相對于文檔頂部的高度
element.offsetTop
MDN：為只讀屬性呜笑，它返回當前元素相對其 offsetParent 元素的頂部距離夫否。
③ 獲取瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離
document.documentElement.scrollTop
MDN：屬性可以獲取或設(shè)置一個元素的內(nèi)容垂直滾動的像素數(shù)叫胁。當一個元素的內(nèi)容沒有產(chǎn)生垂直方向的滾動條凰慈，那么它的 scrollTop 值為 0。
④ 通過上面三個API驼鹅，我們獲得了三個值：可視區(qū)高度微谓、元素相對于其父元素容器頂部的距離、瀏覽器窗口頂部與容器元素頂部的距離也就是滾動條滾動的高度输钩。
⑥ 如果：offsetTop - scrollTop < clientHeight 則圖片進入可視區(qū)內(nèi)豺型，則被請求。
五买乃、代碼實現(xiàn)
① 第一種實現(xiàn)方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
display: block;
width: 100%;
height: 300px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<img data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg">
<img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2654365388,3749485282&fm=26&gp=0.jpg">
<img data-src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00487-1155.jpg">
<img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=239110925,962980089&fm=26&gp=0.jpg">
<img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1808664313,530970200&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3325605116,3025793151&fm=26&gp=0.jpg">
<img data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1100786670,1609279816&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2665728391,1876846198&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1883571456,3298240469&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3065485140,2677122975&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2685177128,4134246955&fm=26&gp=0.jpg">
</div>
<script>
var imgs = document.querySelectorAll("img");
// 獲取元素到頂部的距離
function getPageOffset(el){
var left = el.offsetLeft;
var top = el.offsetTop;
while(el.offsetParent){
el = el.offsetParent;
left += el.offsetLeft + el.clientLeft;
top += el.offsetTop + el.clientTop;
}
return { left, top };
}
// 圖片懶加載
function lazyLoad(imgs) {
var clientH = document.documentElement.clientHeight;
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = 0; i < imgs.length; i++) {
var { top } = getPageOffset(imgs[i]);
if (clientH + scrollT > top) {
imgs[i].src = imgs[i].getAttribute("data-src");
}
}
}
window.onload = window.onscroll = function() {
lazyLoad(imgs);
}
</script>
</body>
</html>
② 第二種實現(xiàn)方式
利用 getBoundingClientRect() 來獲取元素的大小及位置姻氨。
MDN：該方法返回元素的大小及其相對于是視口的位置。
實現(xiàn)方式：
懶加載的一個重點就是要知道什么時候圖片是進入了可視區(qū)內(nèi)剪验，那么就上面這張圖而言肴焊，我們有什么方法判斷圖片進入了可視區(qū)呢前联。
其實很簡單：我們先獲取圖片到可視區(qū)頂部的距離,并獲取到可視區(qū)的高度：
var bound = el.getBoundingClientRect();
var clientHeight = window.innerHeight;//這個和前面獲取可視區(qū)高度的效果一樣，只是兼容性問題
當我們滾動條向下滾動的時候娶眷，bound.top 值會變得越來越小似嗤，也就是圖片到可視區(qū)頂部的距離也越來越小，當 bound.top == clientHeight 時届宠，說明土片馬上就要進入可視區(qū)了烁落，只要我們在滾動，圖片就會進入可視區(qū)豌注，那么就需要請求資源了伤塌。也就是說，在 bound.top<=clientHeight時幌羞，圖片是在可視區(qū)域內(nèi)的寸谜。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
display: block;
width: 100%;
height: 300px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<img data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg">
<img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2654365388,3749485282&fm=26&gp=0.jpg">
<img data-src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00487-1155.jpg">
<img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=239110925,962980089&fm=26&gp=0.jpg">
<img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1808664313,530970200&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3325605116,3025793151&fm=26&gp=0.jpg">
<img data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1100786670,1609279816&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2665728391,1876846198&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1883571456,3298240469&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3065485140,2677122975&fm=26&gp=0.jpg">
<img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2685177128,4134246955&fm=26&gp=0.jpg">
</div>
<script>
var imgs = document.querySelectorAll("img");
function isIn(img) {
var top = img.getBoundingClientRect().top;
var innerH = window.innerHeight;
return top <= innerH;
}
function check(imgs) {
[...imgs].forEach(img => {
if (isIn(img)) {
lazyLoad(img);
}
})
}
function lazyLoad(img) {
if (!img.src) {
img.src = img.dataset.src;
}
}
window.onload = window.onscroll = function() {
check(imgs);
}
</script>
</body>
</html>
