補充
實現原理:
先將img標簽的src鏈接設為同一張圖片（比如空白圖片），然后給img標簽設置自定義屬性（比如 data-src）,
然后將真正的圖片地址存儲在data-src中，當JS監聽到該圖片元素進入可視窗口時，將自定義屬性中的地址存儲到src屬性中。達到懶加載的效果
圖片懶加載作為優化手段之一,怎能不學習一下嘞
使用詳解:
1.安裝插件
npm install vue-lazyload --save
2.引用插件,並在main.js中全局配置
import Vue from 'vue' import VueLazyload from 'vue-lazyload'
import { isTestEnv,defaultImg } from '@/config';
Vue.use(VueLazyload, { preLoad: 1.3, error: defaultImg, loading: defaultImg, attempt: 1 })
在config/index.js文件中配置
let defaultImg = require("@/assets/images/common/productDefault.png");
export {
defaultImg,
}
這里注意引用本地圖片的位置:
- 如果占位圖位置在static文件夾內,可以直接引入路徑
- 如果在assets文件夾內的話需要以require('img.src')的方式引入圖片，不這么寫會導致webpack在打包時候無法正確解析圖片
3.頁面中使用
<img v-lazy="imgUrl" alt :key="index" />
以上為基本使用方式了
*****************************************************************************************************
如果個別圖片需要單獨設置占位圖,就需要單獨配置一下
效果圖
<template>
<div class="lazyLoadImg_wrap">
<img v-lazy:background-image="getImgObj()" class="first" @click="changeImg(1)" /> <div v-lazy:background-image="getImgObj()" class="first"></div> <img v-lazy="imgUrl" alt class="second"/> </div> </template> <script> export default { name: "lazyLoadImg", data() { return { imgUrl: "//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202005/26/637261087251589902.jpg",
index:1
}; }, methods: { getImgObj(){ return { src: '//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202005/07/637244494194836859.jpg', error: '//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202005/26/637261040282584208.jpg', loading: '//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202005/26/637261040282584208.jpg' } }, } }; </script>
如上:使用 img/div 設置其 v-lazy:background-image="{src: item.src, error: 'http://xx.com/error.png', loading: 'http://xx.com/loading-spin.svg'}" 屬性即可
這里將設置屬性放在函數中,抽離出來,美觀易修改
之前存在不能動態修改圖片的bug,我測試了一下,現在還像是不存在了,如果有的話,也不怕,解決方案已寫在代碼中
給圖片添加key值即可,如
<img v-lazy="imgUrl" alt :key="index" />
分享一刻: