1. v-lazy
v-lazy是一個vue封裝好的一個圖片懶加載工具,具體使用方式
1.安裝依賴:npm install vue-lazyload
2.在main.js中全局配置
/ 引入全局依賴
import VueLazyload from 'vue-lazyload';
// 配置懶加載屬性
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('圖片地址'), // 報錯時候的圖片
loading: require('圖片地址'), //加載時候的圖片
attempt: 1
});
- 頁面中使用
template>
<div class="about">
<img v-lazy="src">
</div>
</template>
<script>
export default{
data(){
return{
src:'圖片鏈接'
}
}
}
</script>
2. js手寫
// utils/ 寫一個工具
window.onload = function () {
const imgs = document.querySelectorAll('img');
function getTop (e) {
return e.offsetTop;
}
function lazyload (imgs) {
// 可視區(qū)高度
const h = window.innerHeight;
// 滾動區(qū)域高度
const s = document.body.scrollTop || document.documentElement.scrollTop;
for (let i = 0; i < imgs.length; i++) {
if ((h + s) > getTop(imgs[i])) {
(function (i) {
setTimeout(function () {
// 不加立即執(zhí)行函數(shù)i會等于9
// 隱形加載圖片或其他資源，
// 創(chuàng)建一個臨時圖片，這個圖片在內(nèi)存中不會到頁面上去。實現(xiàn)隱形加載
const temp = new Image();
temp.src = imgs[i].getAttribute('data-src');// 只會請求一次
// onload判斷圖片加載完畢蹋偏，真是圖片加載完畢，再賦值給dom節(jié)點
temp.onload = function () {
// 獲取自定義屬性data-src弄诲，用真圖片替換假圖片
imgs[i].src = imgs[i].getAttribute('data-src');
};
}, 1000);
})(i);
}
}
}
lazyload(imgs);
// 滾屏函數(shù)
window.onscroll = function () {
lazyload(imgs);
};
};
