Vue 中实现图片预加载 + 懒加载原理实现

##懒加载----------------------------------------------------

 插件---------
. 安装插件：
npm install vue-lazyload --save-dev


使用插件
main.js 中使用:

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:'./static/error.png',                        //报错需要的图片
    loading:'./static/loading.png'					// 替换需要的图片
})
 
图片替换：

 vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 

<img class="item-pic" v-lazy="newItem.picUrl"/>
 
 

图片懒加载原理实现
	getBoundingClientRect
      DOM 元素包含一个getBoundingClientRect 方法， 执行该方法返回当前DOM节点相关的Css边框集合，其中有一个Top 属性代表当前DOM 节点距离浏览器窗口顶部的高度，只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight),若小于说明已经进入用户视野，然后替换为真正的图片即可
          另外使用getBoundingClientRect 作图片懒加载需要注意三点
            1。 因为需要监听scroll 事件，不停的判断top 的值和浏览器高度的关系，请对监听事件进行函数节流
            2. 当屏幕首次渲染时，不会触发scroll 事件，请主动调用一次事件处理程序，否则若用户不滚动则首屏的图片会一直使用懒加载的默认图片
            3. 当所有需要懒加载 的图片都被加载完，需要移除事件监听，避免不必要的内存占用


 intersectionObserver
      intersectionObserver作为一个构造函数，传入一个回调函数作为参数，生成一个实例observer，
      这个实例有一个observe方法用来观察指定元素是否进入了用户的可视范围，随即触发传入构造函数中的回调函数
      同时给回调函数传入一个entries 的参数，记录着这个实例观察的所有元素的对象，其中intersectionRatio 属性表示图片已经进入可视范围百分比，大于0 表示已经有部分进入了用户视野
      此时替换为真实的图片，并且调用实例的unobtrusive 将这个img 元素从这个实例的观察列表的去除

JS---方法一: getBoundingClientRect

  let imgList1 = [...document.querySelectAll("img")]
    let num = imgList1.length

    let lozyload1 = (()=>{
      let count = 0 
     return function(){
       let newArr = []
        imgList1.forEach((item, index)=>{
        let Rect =  item.getBoundingClientRect()
        if(Rect.top < window.innerHeight){
          Rect.src = Rect.dataset.src 
          newArr.push(index)
          count ++
          if(count === num ){
            document.removeEventListener("srcoll" , lozyload1)
          }
        }
      })
      //删除已加载完毕的图片
      imgList1 = imgList1.filter((_ , index)=> !newArr.includes(index))
    } 
    })()
    这里调用了throttle 的节流函数
    lozyload1 = proxy(lozyload1 , 100)
    document.addEventListen("srcoll" , lozyload1)
    手动执行一次，加载首屏图片
    lozyload1()



方法二：----intersectionObserver

   let imgList2 = [ ...document.querySelectAll("img") ]

      let lozyload2 = (()=>{
        实例化observer
        let observer = new IntersectionObserver( entries =>{
          entries 存储着所有观察元素的intersectionObserverEntry 配置
          entries.forEach(entry=>{
            if(entry.intersectionRatio > 0 ){
              entry.target.src = entry.target.dataset.src 
              //取消观察
              observer.unobserve(entry.target)
            }
          })
        })

        imgList2.forEach(img=>{
          observer.observe(img)
        })
      })

      lozyload2()

##Vue中的预加载-------------------------------------

 
 

解析代码: HTML：  img 标签为背景图， loading 图， P 标签为显示的百分比， 
	
	JS： imgArr 为 所有的图片信息 ， 
			imgCount： 为动态的显示百分比

Vue的生命周期： mounted ，在页面加载完成时执行 loading 函数，

	在methods ：中执行方法：   先将data 中的数据写到methods 中( 本人比较懒， 不想调用this ) 
		然后对所有的imgArr 进行遍历 ，  最后  image.onload 方法 ， 代码在下面

这里面有个小坑， 就是图片动态加载时， 需求添加require ， 用require 标签包裹下 ，   下面是图片   ，：：：：： 和img 图片路径