图片懒加载

图片懒加载：

优先加载可视区域的内容，其它内容等进入了可视区域再进行加载从而提高性能

分为两步：

（1）怎么加载图片？

（2）怎么判断是否进入了可视区域？

1.怎么加载图片

图片都是根据图片的src进行加载的，所以在图片进入可视区域前，我先不给src赋值或者可以给一个很小的loading图的地址，等到图片进入了可视区域后，再给src赋上真正的地址值

<div>
    <h6>图片懒加载</h6>
    <img data-src="/static/images/login-bg-3.jpg" src="/static/images/login-bg-4.jpg"><br>
    <img data-src="/static/images/login-bg-1.jpg" src="/static/images/login-bg-4.jpg"><br>
    <img data-src="/static/images/login-bg.jpg" src="/static/images/login-bg-4.jpg"><br>
    <img data-src="/static/images/login-bg-3.jpg" src="/static/images/login-bg-4.jpg"><br>
    <img data-src="/static/images/login-bg-old.jpg" src="/static/images/login-bg-4.jpg"<br>
    <img data-src="/static/images/login-bg-1.jpg" src="/static/images/login-bg-4.jpg"><br>
    <img data-src="/static/images/login-bg.jpg" src="/static/images/login-bg-4.jpg"><br>
</div>

 2.怎么判断是否进入了可视区域

1. getBoundingClientRect API实现

  引入一个新的API，Element.getBoundingClientRect( ) 方法会返回元素的大小及其相对于视口的位置。所以我们只需要判断这个图片元素的top是否小于可视窗口的高度。如果小于那么就说明在可视区域内。这个时候给src赋上图片真正的地址值（可视窗口高度我们是可以通过document.body.clientHeigh得到的）

data(){
    return{
      flag: true
    }
  },
  created() {
    this.throttle(this.lazyLoad, 3000)()  //首次进入加载
  },
  mounted() {
    const that = this;
    window.addEventListener('scroll',()=>{
       that.throttle(that.lazyLoad, 2000)()
    })
  },
  methods:{
    //节流优化
    throttle(fn, delay){
      const that = this;
      return function () {
        if (!that.flag) return;
        that.flag = false;  //没执行过就一直是false，会直接return
        setTimeout(() => {
          fn.apply(that, arguments);
          that.flag = true; //setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
        }, delay);
      }
    },
    //懒加载函数
    lazyLoad(){
      let images = document.getElementsByTagName('img')  //不是数组，htmlCollection遍历时要注意
      //加定时器的目的是为了让images能够遍历到
      setTimeout(()=>{
        for(let i =0;i<images.length;i++){
          if(images[i].getBoundingClientRect().top<document.body.clientHeight){   //getBoundingClientRect().top 元素的上边相对浏览器视窗的位置如果小于可视窗口的高度
            images[i].src = images[i].dataset.src;
          }
        }
      },300)
    }
  }

2.元素的offsetTop API 实现

    写法与第一种基本相似，只是判断进入可视区域的条件有变，通过下图，可以看出，这里进入可视区域的判断条件是某一元素e的

e.offsetTop<document.body.clientHeight+document.body.scrollTop

 

3.IntersectionObserver API 实现

这个api可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见的本质是，目标元素与视口产生一个交叉区，所以这个 API 又叫做交叉观察器。

created() {
    this.intersectionObserver();
},
methods:{
    intersectionObserver(){
        let images = document.getElementsByTagName('img');
        const observer = new IntersectionObserver((imgs) => {
          console.log('imgs===', imgs)
          // imgs: 目标元素集合
          imgs.forEach((img) => {
            // img.isIntersecting代表目标元素可见，可见的时候给src赋值
            if (img.isIntersecting) {
              const item = img.target
              item.src = item.dataset.src
              observer.unobserve(item);
            }
          })
        })
      //定时器和Array.from的目的是让images可遍历
      setTimeout(()=>{
        Array.from(images).forEach(item => {
          observer.observe(item);
        })
      },300)
    }
}

imgs的打印如下：

IntersectionObserver为true代表该目标元素可见，可以加载；target即对应页面中的真实

4.vue-lazyload插件 

（1）安装插件

      npm install vue-lazyload --save-dev

（2）在main.js中引入并使用

     import VueLazyload from ‘vue-lazyload’

     Vue.use(VueLazyload)

（3）修改图片显示方式为懒加载即可（将:src=”xxx”属性直接改为v-lazy=”xxx”）