联盟网站做任务,重庆建网站要多少钱,专类销售网站有哪些,有几个网站可以做代发的参考来自前辈 Aidan路修远i 的文章面试官#xff1a;请你手写一下#xff01;懒加载 - 掘金 (juejin.cn)
Hello.vue
templatediv!-- src里面为空#xff0c;data-original里面写图片真正的url(此处省略) --img src data-origina…参考来自前辈 Aidan路修远i 的文章面试官请你手写一下懒加载 - 掘金 (juejin.cn)
Hello.vue
templatediv!-- src里面为空data-original里面写图片真正的url(此处省略) --img src data-originalimg src data-originalimg src data-originalimg src data-originalimg src data-originalimg src data-original img src data-originalimg src data-originalimg src data-originalimg src data-originalimg src data-originalimg src data-original/div
/templatescriptexport 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.topviewHeight){// 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)}}
/scriptstyle scopedimg {display: block;height: 300px;width: 300px;margin-top: 50px;}
/style
App.vue
templatediv idappHello //div
/templatescript
import Hello from ./components/Hello.vueexport default {name: App,components: {Hello},}
/scriptstyle
/style
