DDR爱好者之家

vue实现图片懒加载的方法分析
站长资源 2024/12/28 佚名
49 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了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']可以省略，

当插件跟页面中的动画或过渡等事件有冲突是，

可以尝试其他选项

['scroll'（默认）,

'wheel',

'mousewheel',

'resize',

'animationend',

'transitionend',

'touchmove']

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程序设计有所帮助。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米