vue-lazyload 简易上手教程_vue-layzload npm-CSDN博客

本文详细介绍如何在Vue项目中安装并使用vue-lazyload插件，实现图片懒加载功能，提升网页性能。涵盖依赖安装、配置选项及两种使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1) 在项目中安装依赖

$ npm install vue-lazyload -D

2) main.js 中加入vue-laryload 相关代码

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

error:加载失败后图像的src

loading：加载时图像的src

preLoad：预加载高度的比例

attempt：计数

3）template 模板中使用语法【后台返回数据使用方法】方法1

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

4）使用 v-lazy-container 原始HTML 【图片是本地的，或是网络图片】方法2

< div v-lazy-container = “ {selector：'img'，error：'xxx.jpg'，loading：'xxx.jpg'} ” > 
  < img data-src = “ //domain.com/img1.jpg ” > 
  < img data-src = “ //domain.com/img2.jpg ” > 
  < img data-src = “ //domain.com/img3.jpg ” >   
</ div >

error和loading 的图像可以自定义

selector：固定必选参数，img