不使用插件,用Vue写图片懒加载,有什么滚屏事件的语法糖吗
###- 没有,Vue 的设计思路里本来也不包含滚动相关的,它是 MVVM 框架,强调的是数据和视图之间的绑定
- 不过你可以用
<img loading="lazy">
,目前大部分现代化浏览器都支持。
interSectionObserver
###`
// IntersectionObserver 这是浏览器内置的一个API,实现了监听window的scroll事件、判断是否在视口中以及节流三大功能。
let img = document.document.getElementsByTagName("img");
const observer = new IntersectionObserver(changes => {
//changes 是被观察的元素集合
for(let i = 0, len = changes.length; i < len; i++) {
let change = changes[i];
// 通过这个属性判断是否在视口中
if(change.isIntersecting) {
const imgElement = change.target;
imgElement.src = imgElement.getAttribute("data-src");
// 取消监听
observer.unobserve(imgElement);
}
}
})
observer.observe(img);`