手写图片懒加载

参考来自前辈 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-originalimage.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>