#每日学习前端#
为什么要使用懒加载?
当我们进入到某个页面的时候,会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动全部展示时,其实下面的图片是没有作用的,这个时候如果说加载了也相当于白加载,而且还降低了网页的加载速度,那懒加载就是只有滚动到可视区域时才加载当前的图片,也就是说不是一次性加载所有的图片,从而在一程度减少服务端的请求及带宽;
懒加载的优点:
提高前端性能,图片在需要的时候才加载,减轻服务的负担,提高页面的加载速度,能够减少带宽
实现原理?
图片的加载是由src的值引起的,当对src赋值时浏览器会请求图片资源,基于这个,可以利用html5的属性data-xxx来保存图片的路径,当我们需要加载图片的时候才将data-xxx的值赋予src,就能实现图片的按需加载,也就是懒加载了;
vue-lazyload使用
安装 cnpm i --save vue-lazyload
import vueLazyLoad from "vue-lazyload";
Vue.use(vueLazyLoad,{
preload:1,//默认1.3. 计算值为(preload - 1)
loading:require("./assets/img/loading.gif"),
error:require("./assets/img/error.jpeg"),
});
preLoad: 类型Number,默认1.3. 表示lazyload的元素距离页面底部距离的百分比.计算值为(preload - 1).
attempt: 图片加载失败后的重试次数.默认为3.
error: 类型string.图片加载失败后的显示的失败图片路径.
loading: 类型string.图片正在加载中显示的loading图片的路径.
listenEvents: 类型array.默认['scroll', 'wheel', 'mousewheel', 'resize', 'animationend','transitionend', 'touchmove'].即是在监听上 述事件中,判断图片是否在preload的位置.如果你不想在那么多事件中判断,可以指定一个或者几个.例如如果你给这个属性只指定
['touchmove'].那么scroll 屏幕不会加载图片,只有手指滑动屏幕才会加载图片.
adapter: 注册img 的loading,loaded,error三个状态的回调函数,参数会暴露懒加载的img元素,可以对其进行操作.
filter: img未加载之前,解析到src 的时候注册的回调函数.可以在加载图片之前,对src进行修改.注册在filter下的所有的函数都会执行
lazyComponent: 类型Boolean.是否启用懒加载组件.<lazy-component>组件中的内容只有在出现在preload的位置中才会加载组 件.这个lazyloadComponent 组件有个缺点就是,组件在加载前是什么都不渲染的,这样子的话,有可能会影响布局,以及加载前到加载后的切换不好,有点突兀和生硬.挖坑(vue懒加载组件)observer: 是否启用IntersectionObserver,这个api有兼容问题
observerOptions: 默认{ rootMargin: '0px', threshold: 0.1 } 主要是我对这个pai不熟,按照vue-lazyload的说法是开启之后,
使用
<div>
<ul>
<li v-for="(item,i) in lists" :key="i">
<img v-lazy="item.img" alt="" style="height:100px"/>
<span>{{item.text}}</span>
</li>
</ul>
</div>
将img的路径地址放到v-lazy属性上即可
```
不积跬步,无以至千里;不积小流,无以成江海。奥利给~