Vue项目中如何实现图片懒加载（附完整代码）

安装vue-lazyload

npm install vue-lazyload
//或者
yarn add vue-lazyload

引入vue-lazyload

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)

模板中调用lazyload指令

<template>
  <img v-lazy="imageURL" alt="我是图片" src="占位符图片">
</template>

配置lazyload

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例，默认为1.3
  error: '错误时显示的图片URL', // 图片加载失败时显示的图片
  loading: '加载中显示的图片URL', // 图片加载时显示的图片
  attempt: 1 // 图片加载失败后重新加载的次数，默认为1
})

el-table合并行的通用方法（附js代码）

vue前端分页功能实现代码（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

一款免费开源效果酷炫的 Vue / React 大屏数据展示组件库——DataV

vue项目动态设置background背景色，解决颜色被替换问题

标签： vue-lazyload, Vue图片懒加载

上面是“Vue项目中如何实现图片懒加载（附完整代码）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4864.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！