H5W3
当前位置:H5W3 > 问答 > 正文

Vue写图片懒加载的问题

不使用插件,用Vue写图片懒加载,有什么滚屏事件的语法糖吗

  1. 没有,Vue 的设计思路里本来也不包含滚动相关的,它是 MVVM 框架,强调的是数据和视图之间的绑定
  2. 不过你可以用 <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);`

回答

本文地址:H5W3 » Vue写图片懒加载的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址