https://blog.csdn.net/w1418899532/article/details/90515969
有時候一個網頁會包含很多的圖片，例如淘寶京東這些購物網站，商品圖片多隻之又多，頁面圖片多，加載的圖片就多。服務器壓力就會很大。不僅影響渲染速度還會浪費帶寬。比如一個1M大小的圖片，併發情況下，達到1000併發，即同時有1000個人訪問，就會產生1個G的帶寬。
爲了解決以上問題，提高用戶體驗，就出現了懶加載方式來減輕服務器的壓力，優先加載可視區域的內容，其他部分等進入了可視區域再加載，從而提高性能。
vue項目中的打包，是把html、css、js進行打包，還有圖片壓縮。但是打包時把css和js都分成了幾部分，這樣就不至於一個css和就是文件非常大。也是優化性能的一種方式。
效果動圖如下：
進入正題------懶加載
1.懶加載原理
一張圖片就是一個<img>標籤，瀏覽器是否發起請求圖片是根據<img>的src屬性，所以實現懶加載的關鍵就是，在圖片沒有進入可視區域時，先不給<img>的src賦值，這樣瀏覽器就不會發送請求了，等到圖片進入可視區域再給src賦值。
2.懶加載思路及實現
實現懶加載有四個步驟，如下：
1.加載loading圖片
2.判斷哪些圖片要加載【重點】
3.隱形加載圖片
4.替換真圖片
1.加載loading圖片是在html部分就實現的，代碼如下：
2.如何判斷圖片進入可視區域是關鍵。
引用網友的一張圖，可以很清楚的看出可視區域。
如上圖所示，讓在瀏覽器可視區域的圖片顯示，可視區域外的不顯示，所以當圖片距離頂部的距離top-height等於可視區域h和滾動區域高度s之和時說明圖片馬上就要進入可視區了，就是說當top-height<=s+h時，圖片在可視區。
這裏介紹下幾個API函數：
頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被捲去的高： document.body.scrollTop;
網頁被捲去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;
HTMLElement.offsetTop 爲只讀屬性，它返回當前元素相對於其 offsetParent 元素的頂部的距離。
window.innerHeight：瀏覽器窗口的視口（viewport）高度（以像素爲單位）；如果有水平滾動條，也包括滾動條高度。
具體實現的js代碼爲：
// onload是等所有的資源文件加載完畢以後再綁定事件
window.onload = function(){
// 獲取圖片列表，即img標籤列表
var imgs = document.querySelectorAll('img');
// 獲取到瀏覽器頂部的距離
function getTop(e){
return e.offsetTop;
}
// 懶加載實現
function lazyload(imgs){
// 可視區域高度
var h = window.innerHeight;
//滾動區域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i < imgs.length;i++){
//圖片距離頂部的距離大於可視區域和滾動區域之和時懶加載
if ((h+s)>getTop(imgs[i])) {
// 真實情況是頁面開始有2秒空白，所以使用setTimeout定時2s
(function(i){
setTimeout(function(){
// 不加立即執行函數i會等於9
// 隱形加載圖片或其他資源，
//創建一個臨時圖片，這個圖片在內存中不會到頁面上去。實現隱形加載
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只會請求一次
// onload判斷圖片加載完畢，真是圖片加載完畢，再賦值給dom節點
temp.onload = function(){
// 獲取自定義屬性data-src，用真圖片替換假圖片
imgs[i].src = imgs[i].getAttribute('data-src')
}
},2000)
})(i)
}
}
}
lazyload(imgs);
// 滾屏函數
window.onscroll =function(){
lazyload(imgs);
}
}
效果如下：
隨着鼠標向下滾動，其餘圖片也逐漸顯示併發起請求。
效果動圖如下：
每天進步一點點、充實一點點、加油！Girl！
使用IntersectionObserver接口進行圖片懶加載
轉載https://blog.csdn.net/chauncywu/article/details/99072044
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.list {
width: 500px;
height: 300px;
margin: 20px;
}
.img {
width: 100%;
height: 300px;
}
</style>
<body>
<div>圖片來源於http://www.acgjc.com</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/183dc2537018c3e8934c819251c72136-1024x576.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/90cfb81aebc76a0fad7d311800fdbff2-1024x576.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/3685ffdd022374d80d5a5b0a1830146c-1024x553.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/e62c330f09a9c86a6b3471850b22957b-1024x512.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/c374b5e14e5f36fc76ff6485782fd6d8-1-1024x473.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/7255d9b1da818860b351d67762b59029-1024x576.png" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/9d94d1b3710caafc47d956c9b78cb636-1024x768.jpg" class="img">
</div>
<div class="list">
<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/04f614a8a2c31c009dacfa04965474b4-1024x769.jpg" class="img">
</div>
<script type="text/javascript">
let imgList = document.querySelectorAll('.img')
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
entry.target.src = entry.target.dataset.src
observer.unobserve(entry.target)
}
})
})
imgList.forEach(img => {
observer.observe(img)
})
</script>
</body>
</html>
