IntersectionObserver实现图片懒加载的示例

前端之家收集整理的这篇文章主要介绍了IntersectionObserver实现图片懒加载的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

API:

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

直接上源码:

    1. <script>
    2. var observer = new IntersectionObserver(function(changes) {
    3. console.log(changes);
    4. changes.forEach(function(element,index) {
    5. // statements
    6. if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
    7. element.target.src = element.target.dataset.src;
    8. }
    9. });
    10. });
    11. function addObserver() {
    12. var listItems = document.querySelectorAll('.list-item-img');
    13. listItems.forEach(function(item) {
    14. observer.observe(item);
    15. });
    16. }
    17. addObserver();
    18. </script>

    运行代码后发现,当滚动滚动轴时,只有当

  • 区域完全显示出来后才会触发相应的下载图片的http请求。

    兼容浏览器:

    desktop:

    Mobile:

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

  • 猜你在找的JavaScript相关文章