当前位置:Gxlcms > JavaScript > IntersectionObserver实现图片懒加载的示例

IntersectionObserver实现图片懒加载的示例

时间:2021-07-01 10:21:17 帮助过:11人阅读

API:

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

直接上源码:

  1. <!DOCTYPE html>
  2. <html>
  3. <header>
  4. <style>
  5. .list-item{
  6. height: 400px;
  7. margin: 5px;
  8. background-color: lightblue;
  9. list-style: none;
  10. }
  11. </style>
  12. </header>
  13. <body>
  14. <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon1.png'></li>
  15. <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon2.png'></li>
  16. <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon3.png'></li>
  17. <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon4.png'></li>
  18. <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon5.png'></li>
  19. <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon6.png'></li>
  20. <script>
  21. var observer = new IntersectionObserver(function(changes) {
  22. console.log(changes);
  23. changes.forEach(function(element, index) {
  24. // statements
  25. if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
  26. element.target.src = element.target.dataset.src;
  27. }
  28. });
  29. });
  30. function addObserver() {
  31. var listItems = document.querySelectorAll('.list-item-img');
  32. listItems.forEach(function(item) {
  33. observer.observe(item);
  34. });
  35. }
  36. addObserver();
  37. </script>
  38. </body>
  39. </html>

运行代码后发现,当滚动滚动轴时,只有当<li>区域完全显示出来后才会触发相应的下载图片的http请求。

兼容浏览器:

desktop:

Mobile:

以上这篇IntersectionObserver实现图片懒加载的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

人气教程排行