vue中使用图片懒加载的

#每日学习前端#

为什么要使用懒加载？
当我们进入到某个页面的时候，会有许多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有作用的，这个时候如果说加载了也相当于白加载，而且还降低了网页的加载速度，那懒加载就是只有滚动到可视区域时才加载当前的图片，也就是说不是一次性加载所有的图片，从而在一程度减少服务端的请求及带宽；

懒加载的优点：  
提高前端性能，图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，能够减少带宽

实现原理?  
图片的加载是由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属性上即可
```

不积跬步，无以至千里；不积小流，无以成江海。奥利给~