Vue写图片懒加载的问题

Question

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

Answer 1

1. 没有，Vue 的设计思路里本来也不包含滚动相关的，它是 MVVM 框架，强调的是数据和视图之间的绑定
2. 不过你可以用 <img loading="lazy">，目前大部分现代化浏览器都支持。

Answer 2

interSectionObserver

Answer 3

`

// 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);`