vue中使用图片懒加载vue-lazyload插件指南

最新推荐文章于 2024-08-24 09:06:19 发布

Leon_94

最新推荐文章于 2024-08-24 09:06:19 发布

阅读量635

点赞数

分类专栏： vue 文章标签： vue lazyLoad

本文链接：https://blog.csdn.net/sinat_36422236/article/details/82792080

版权

本文介绍了如何在Vue项目中使用vue-lazyload插件进行图片懒加载。通过npm安装、引入CDN或在main.js配置，可以方便地将img的:src替换为v-lazy。同时，文章还提到了参数配置和可监听的事件。

摘要由CSDN通过智能技术生成

使用方式

使用vue的 vue-lazyload 插件
插件地址:

https://www.npmjs.com/package/vue-lazyload

Installation 安装方式

1. npm

 $ npm i vue-lazyload -D

2.CDN

CDN:https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
  Vue.use(VueLazyload)
  ...
</script>

3.用法

入口文件 main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'  //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loadin