前端面试题 图片懒加载

实现图片懒加载的原因：

当我们页面的图片很多的时候我们如果都要全部加载，就会浪费服务器带宽，影响服务器的性能。所以我采用的是先展示可视区域的图片，当图片到达可视区域的时候再去加载。所以要实现这个功能 我们就得解决两个问题：

1、怎么判断图片是否到达可视区域

1. IntersectionObserver 可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"
2. 使用vue-lazyload组件来实现

2、到达可视区域怎么加载图片呢

图片的加载是根据图片的src属性，到图片到达可视区域前，先不给src属性赋值或者先给一个很小的loading图片地址，到图片到大可视区域后再给附上真正的图片地址

实现 通过IntersectionObserver来实现 封装自定义指令

<template>
    <div>
        <section class="box">

        </section>
        <img src="" v-lazy="imgsrc">
    </div>
</template>
<script>
import defaultImg from '@/assets/img/404.png'
export default {
   data(){
        return{
            imgsrc:"https://img1.baidu.com/it/u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        }
   },
   directives:{
        lazy:{
            inserted(el,binding){
                const options={threshold:0}
                //创建观察者对象
                const observer = new IntersectionObserver(([{isIntersecting}]) => {
                //判断是否进入可视区域
                if(isIntersecting){
                    //停止观察
                    observer.unobserve(el)
                    //出错的话就是错误图片
                    el.onerror=()=>{
                        el.src=defaultImg
                    }
                    //给src赋值
                    el.src =binding.value
                }
                }, options)
                //观察当前元素
                observer.observe(el)
            }
        }
   } 
}
</script>
<style>
.box{
    height:800px;
    background: red;
}
</style>