v-lazy图片懒加载

更新日期: 2019-11-16阅读: 4.5k标签: 懒加载

1、安装插件

npm install vue-lazyload --save


2、在main.js文件中注册插件

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
     loading: require('img/loading.png'),//加载中图片,一定要有,不然会一直重复加载占位图
     error: require('img/error.png')  //加载失败图片
});

配置参数:

keydescriptiondefault
preLoad提前加载高度(数字 1 表示 1 屏的高度)1.3
error图片加载失败时显示的图片'data-src'
loading图片加载状态下显示的图片'data-src'
attempt加载错误后最大尝试次数3
listenEvents监听事件['scroll', 'wheel', 'mousewheel',
'resize', 'animationend', 'transitionend',
'touchmove']`
adapter动态修改元素属性{ }
filter图片监听过滤{ }
lazyComponent组件懒加载false
dispatchEvent触发元素状态监听事件(error, loaded, rendered)false

3、v-lazy有三种状态

lazy=loaded

lazy=error

lazy=loading


4、在图片中使用

img:
<img v-lazy="img_url" :key='img_url'> //将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新

背景图:

<div v-lazy:background-image="{src: url}"></div>

如果不想再loading或者error时显示兜底图片,可以分别设置样式代替:

<style>
  img[lazy=loading] { }
  img[lazy=error] { }
  img[lazy=loaded] { }
</style>

链接: https://www.fly63.com/article/detial/6568

监听滚动条,实现数据懒加载

当滚动条滚动到底部时,加载新数据;需要根据距离底部的位置加载数据,考虑到新数据进来会使滚动条距离底部的位置有所改变,避免重复加载数据

vue懒加载

什么是懒加载?懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多

解决el-tree lazy懒加载时,连续勾选前两个子节点后第二次进入默认选中时,将父节点也勾选的问题

在用到el-tree的懒加载和默认勾选功能时,若第一次勾选前几个连续节点,第二次进入默认勾选时,由于el-tree子节点尚未完全加载(只加载出来前几个),默认勾选已经开始

实现一个Vue自定义指令懒加载

当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载。比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不下

前端性能优化之图片懒加载

在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。

过度使用懒加载对 Web 性能的影响

如今为了提升应用性能,懒加载被广泛使用于 Web 应用中。它帮助开发者减少网站加载时间,节省流量以及提升用户体验。但懒加载的过度使用会给应用性能带来负面影响

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!