vue实现图片懒加载的方法分析
作者：米彩 发布时间：2024-04-27 16:10:29
标签：vue,图片懒加载
本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考，具体如下：
vue图片懒加载使用
首先第一步，安装插件
vue-lazyload
npm install vue-lazyload --save-dev
在man.js中引入插件
import VueLazyLoad from 'vue-lazyload'
使用
Vue.use(VueLazyLoad,{
error:'', //加载失败的图
loading:'' //加载中的默认图
})
这是一个最简单的配置
官方的详细扩展配置文档
| key | description | default | options |
|---|---|---|---|
preLoad | proportion of pre-loading height（预加载高度比例） | 1.3 | Number |
error | src of the image upon load fail（图片路径错误时加载图片） | 'data-src' | String |
loading | src of the image while loading（预加载图片） | 'data-src' | String |
attempt | attempts count（尝试加载图片数量） | 3 | Number |
listenEvents | events that you want vue listen for （想要监听的vue事件） 默认['scroll']可以省略， 当插件跟页面中的动画或过渡等事件有冲突是， 可以尝试其他选项 |
| Desired Listen Events |
adapter | dynamically modify the attribute of element （动态修改元素属性） | { } | Element Adapter |
filter | the image's listener filter（动态修改图片地址路径） | { } | Image listener filter |
lazyComponent | lazyload component | false | Lazy Component |
dispatchEvent | trigger the dom event | false | Boolean |
throttleWait | throttle wait | 200 | Number |
observer | use IntersectionObserver | false | Boolean |
observerOptions | IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
实现懒加载，使用v-lazy代替src属性
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
对图片单独进行配置
方法1
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"></div>
方法2
将v-lazy='obj' 赋值一个对象
在data里面声明对象
可以设置三个属性 src 图片 loading加载状态下的图片 error错误状态下的图片
希望本文所述对大家vue.js程序设计有所帮助。
来源：https://blog.csdn.net/qq_42019025/article/details/83311406
0
投稿猜你喜欢
一、文件操作1.打开r+ 打开存在文件 文件不存在 报错file = open("user.txt","r+&- SQL Server数据库如何获取TEXT字段的内容长度的方法，是通过DATALENGTH函数来实现的，接下来我们就通过DATALENGTH
- 目录前言二叉树节点定义递归构建二叉树前言本文的内容是数据结构中二叉树部分最基础的，之所以写一下主要是为了方便刷题的时候，能够在自己电脑上很快
- 安装完 Oracle11g 之后，想打开自带的 SQL Plus 来学习，然后按照提示用 sys 用户来连接数据库，可输了好几次都提示一个错
- python中的with语句使用于对资源进行访问的场合，保证不管处理过程中是否发生错误或者异常都会执行规定的__exit__（“清理”）操作
- Python使用称为Python Path的搜索路径来查找使用import语句导入代码的模块。大多数代码只会汇入已经默认路径上的模块，通过安
- 1、什么是AspJpeg？AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件，网络上对其进行详细和深入介绍的中文
- VIM python下的一些关于缩进的设置：第一步： 打开终端，在终端上输入vim ~/.vimrc，回车。 第二步： 添加下面的文段:se
- PDOStatement::errorInfoPDOStatement::errorInfo — 获取跟上一次语句句柄操作相关的扩展错误信息
- Python list内置sort()方法用来排序，也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列。1）
- 利用python查找电脑里的文件非常方便比如在我的电脑：D:\软件 文件夹里有非常非常多的软件。我忘记某个软件叫什么名字了，只记得文件名称里
- 换了N种字符串连接的方法，终于连接上去了。 共享下用的 Provider=SQLOLEDB.1; User ID=sa; Password=
- 多线程多线程是个提高程序运行效率的好办法，本来要顺序执行的程序现在可以并行执行，可想而知效率要提高很多。但是多线程也不是能提高所有程序的效率
- 一、需求golang默认的结构体json转码出来，都是根据字段名生成的大写驼峰格式，但是一般我们最常用的json格式是小写驼峰或者小写下划线
- 错误15105，从网上找了一些解决方案，一般都是说文件的权限不足的问题，当然附加的时候必须是有数据库附加权限才可以操作的。解决办法1：给相应
- 0.什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对
- 一、效果展示1、俄罗斯方块这个应该是玩起来最最简单的了…2、扫雷运气好，点了四下都没踩雷哈哈…3、五子棋我是菜鸡，玩不赢电脑人…
- 在国内利用Python从Internet上爬取数据时，有些网站或API接口被限速或屏蔽，这时使用代理可以加速爬取过程，减少请求失败，Pyth
- 现在看小说已经有了听书这个功能了，但是有时候你想看的书的听书功能收费，这时候可能大家就只能老老实实选择看或者付费听。（还能拿来练英语听力欸嘿
- 一个完整的程序离不开日志，无论是开发阶段，还是测试阶段，亦或程序运行阶段，都可以通过日志查看程序的运行情况，或是定位问题。下面是对 pyth
