补充
实现原理:
先将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" />
分享一刻: