使用延遲加載的原因
網站中圖片的使用是必不可少的，尤其是對于電子商務網站。 例如，產品列表至少有 60 個產品，每個產品 200K。 事實上，用戶可能會只看前 10 張左右的圖片，而忽略后面的圖片。 現在我們來計算一下，50*0.2M=10M，如果頁面圖片多了，就會加載更多的圖片。 服務器的壓力就會很大。 不僅影響頁面渲染速度還浪費帶寬。 按照剛才的列表計算，在并發的情況下，如果達到1000并發，也就是1000人同時訪問，就會產生10G的帶寬。
好了，說完了為什么用，我們來說說如何實現。
html代碼原理思路及實現
// 先加載的是src中的loading.gif圖，真實的圖片在data-src(或者其他的里面)未進行加載
<div class="img_list">
<img src="./imgs/loading.gif" data-src="./imgs/imgs1.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs2.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs3.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs4.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs5.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs6.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs7.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs8.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs9.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs10.jpg" alt="">
div>
復制代碼簡單版js代碼
// 必須等到網頁DOM加載完后 再實現
window.onload = function(){
// 獲取到瀏覽器頂部的距離
function getTop(e){
return e.offsetTop;
}
// 簡易防抖函數，想要深究可以直接引用npm i -S throttle-debounce
function debounce(wait,fn) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 懶加載實現
function lazyload(){
// 獲取圖片列表
const imgs = document.querySelectorAll('img');
// 可視區域高度
let height = window.innerHeight;
//滾動區域高度
let top = document.documentElement.scrollTop || document.body.scrollTop;
for(let i=0,length=imgs.length;i//圖片距離頂部的距離大于可視區域和滾動區域之和時懶加載
if ((height+top)>getTop(imgs[i])) {
// 真實情況是頁面開始有2秒空白，所以使用setTimeout定時2s
(function(i){
setTimeout(function(){
// 不加立即執行函數i會等于9
// 隱形加載圖片或其他資源，
//創建一個臨時圖片，這個圖片在內存中不會到頁面上去。實現隱形加載
let 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();
// 滾屏函數 添加防抖函數
window.addEventListener('scroll', debounce(100, lazyload))
}
復制代碼 進階js代碼
<img class="lazy" data-src="https://example.com/image.jpg" alt="lazy image" />
<script>
// index.js
// 創建一個 IntersectionObserver 實例
const observer = new IntersectionObserver((entries, observer) => {
// 遍歷觀察到的目標元素
entries.forEach(entry => {
// 如果目標元素進入視口，則加載圖片
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
// 獲取所有需要懶加載的圖片元素
const lazyImages = document.querySelectorAll('.lazy');
// 遍歷所有圖片元素，開始觀察它們
lazyImages.forEach(img => {
observer.observe(img);
});
script>
復制代碼首先，在HTML中，我們為需要延遲加載的圖像添加一個類名lazy，并將圖像的實際URL存儲在data-src自定義屬性中。
接下來，在 中，我們首先創建一個實例，并使用回調函數來處理目標元素和視口之間的跨狀態變化。 在回調函數中，我們首先遍歷所有，即實例綁定的所有目標元素。 對于每個目標元素，如果它已進入視口（即屬性為 true），我們將其實際 URL 分配給 src 屬性并停止觀察該元素（使用該方法）。
最后，我們獲取所有需要延遲加載的圖像元素，并對它們進行迭代，并開始觀察它們的交叉狀態變化，以在它們進入視口時加載圖像。
看到這里，有的同學會說了，這我不想寫怎么辦，OK，繼續往下看
復制代碼直接參考VUE中安裝
npm i -S vue-
main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../static/goods_default.jpg', // 加載失敗或者無資源時顯示的圖片
loading: '../static/weixin.gif', // loading圖片，未加載時顯示的
attempt: 1
})
復制代碼在vue頁面中
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
li>
ul>
復制代碼npm 鏈接...
