懒加载

前端开发过程中，为了丰富页面的表现力，总是需要插入各种各样的图片。但是图片过多，会给页面显示性能带来一些影响。

传统方式是监听scroll事件

        <ul>
            <li><img data-src="1.jpg" alt="" /></li>
            <li><img data-src="2.jpg" alt="" /></li>
             ...........
        </ul>
实现懒加载思路
        1.提前给所有的图片设置宽和高来占位
        2.不设置图片的src属性，而是自定义一个data-src属性来储存图片的路径
        3.判断当前屏幕的位置（图片的top值和屏幕底部的值），来进行是否显示图片，如果需要显示的话，把data-src的值给src。
        var imgs = document.querySelectorAll("img");
            
            //设置滚动事件
            window.onscroll = lazyloadFn;
            
            //屏幕的高度
            var sh = window.innerHeight;
            
            //刚进来需要调用一下
            lazyloadFn();
            
            //图片懒加载的方法
            function lazyloadFn() {
                //获取滚动的距离
                var st = document.body.scrollTop || document.documentElement.scrollTop;
                
                //计算滚动中的底部的值
                var sn = sh + st;
                
                for(var i = 0; i < imgs.length; i++){
                    if (imgs[i].offsetTop <= sn) {
                        imgs[i].src = imgs[i].getAttribute("data-src");
                    }
                }
            }

方法判断元素左上角的坐标是否在视窗内，但是scroll事件触发的太密集，会造成内存不断消耗，带来性能问题。

利用IntersectionObserver可以实现监听元素是否可见

interserverObserver对象可以通过isIntersecting或者intersectionRatio是否大于0判断元素是否在视窗内，并通过data-src来实现懒加载

  <div class="about">
    <h1>懒加载</h1>
    <div>
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
      <img src="" alt="" data-src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg">
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
    }
  },
  computed:{},
  created () {},
  mounted () {
    let images = document.querySelectorAll('img')
    const observer = new IntersectionObserver(entries => {
       entries.forEach(entry=>{
         console.log(entries,entry.isIntersecting, '2333333ffffffnjhjh')
         if(entry && entry.isIntersecting){
           entry.target.src = entry.target.dataset.src
           observer.unobserve(entry.target)
         }
       })
    })
    images.forEach(e=>{
      observer.observe(e)
    })
  },
  methods: {
  }
}