Vue-lazyload 图片懒加载的使用详解

补充

实现原理:

　　先将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" />

 

分享一刻:

Gzip 格式和 DEFLATE 压缩算法