手写图片懒加载

参考来自前辈 Aidan路修远i 的文章面试官：请你手写一下！懒加载 - 掘金 (juejin.cn)

Hello.vue 

<template>
    <div>
        <!-- src里面为空，data-original里面写图片真正的url(此处省略) -->
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">    
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">
        <img src="" data-original="">
    </div>
</template>

<script>
    export default {
        name: 'Hello',
        methods: {
            //懒加载函数
            lazyLoad(){
                // 拿到所有的img元素
                let imgs = document.querySelectorAll('img[data-original]');
                imgs.forEach(el=>{
                    // getBoundingClientRect()专门获取容器的几何信息
                    let rect = el.getBoundingClientRect()
                    // 拿到可视觉区域的高度
                    let viewHeight = window.innerHeight;
                    if(rect.top<viewHeight){
                        // img元素自带一个构造函数，可以创建一个图片对象
                        let image = new Image()
                        // js专有写法dataset.original; = data-original
                        image.src = el.dataset.original;
                        //监听图片加载完成后，再给src赋值
                        // image.onload = function(){
                        //     el.src = image.src
                        // }
                        el.src = image.src
                        // 图片加载完毕就移除属性
                        el.removeAttribute('data-original')
                    }
                })
            }
        },
        mounted() {
            // 添加滚动事件监听器
            document.addEventListener('scroll', this.lazyLoad)
        },
        beforeDestroy() {
            //移除滚动事件监听器
            document.removeEventListener('scroll', this.lazyLoad)
        }
        
    }
</script>



<style scoped>
    img {
        display: block;
        height: 300px;
        width: 300px;
        margin-top: 50px;
    }
</style>

App.vue

<template>
  <div id="app">
      <Hello />
  </div>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  },

}
</script>

<style>
</style>