[JavaScript知识库]vue-lazyload — 懒加载图片和组件

仅支持 Vue2，不支持 Vue3

安装依赖包

npm i vue-lazyload -S

在 main.js 使用插件

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: require('./assets/error.gif'),
  loading: require('./assets/loading.gif'),
  attempt: 2, // 尝试次数
})

在组件中使用

<template>
<div>
  <!-- 懒加载图片 -->
  <ul>
    <li v-for="item in imgList" :key="item">
      <img v-lazy="item" alt="" />
    </li>
  </ul>

  <!-- 懒加载背景 -->
  <ul>
    <li v-for="item in imgList" :key="item" v-lazy:background-image="item"></li>
  </ul>
</div>
</template>

export default {
  data() {
    return {
      imgList: [
        require('../assets/img/1.jpg'),
        require('../assets/img/2.jpg'),
        require('../assets/img/3.jpg'),
        require('../assets/img/4.jpg'),
        require('../assets/img/5.jpg'),
        require('../assets/img/6.jpg'),
        require('../assets/img/7.jpg'),
        require('../assets/img/8.jpg'),
        require('../assets/img/9.jpg'),
        require('../assets/img/10.jpg'),
        require('../assets/img/11.jpg'),
        require('../assets/img/12.jpg'),
        require('../assets/img/13.jpg'),
        require('../assets/img/14.jpg'),
        require('../assets/img/15.jpg'),
        require('../assets/img/16.jpg'),
        require('../assets/img/17.jpg'),
        require('../assets/img/18.jpg'),
        require('../assets/img/19.jpg'),
        require('../assets/img/20.jpg'),
      ]
    };
  },
};
</script>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖