image.js 621 B

12345678910111213141516171819
  1. const images = document.querySelectorAll("img");
  2. // 传给IntersectionObserver的回调函数
  3. // 在目标元素能看见时触发一次,目标元素看不见了时再触发一次
  4. const observer = new IntersectionObserver(entries => {
  5. entries.forEach(entry => {
  6. if (entry.isIntersecting) {
  7. const image = entry.target;
  8. const data_src = image.getAttribute("data-src");
  9. image.setAttribute("src", data_src);
  10. // 图片被加载后取消观察
  11. observer.unobserve(image);
  12. }
  13. });
  14. });
  15. images.forEach(image => {
  16. observer.observe(image);
  17. });