IntersectionObserver实现图片懒加载的示例

 更新时间:2017年09月29日 08:06:32   作者:小小程序猿(^_^)  
下面小编就为大家带来一篇IntersectionObserver实现图片懒加载的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

API:

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

直接上源码:

<!DOCTYPE html>
<html>
  <header>
    <style>
      .list-item{
        height: 400px; 
        margin: 5px; 
        background-color: lightblue; 
        list-style: none;
      }
    </style>
  </header>
  <body>
    <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon1.png'></li>
    <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon2.png'></li>
    <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon3.png'></li>
    <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon4.png'></li>
    <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon5.png'></li>
    <li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon6.png'></li>

    <script>
      var observer = new IntersectionObserver(function(changes) {
        console.log(changes);
        changes.forEach(function(element, index) {
          // statements
          if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
            element.target.src = element.target.dataset.src;
          }
        });
      });


      function addObserver() {
        var listItems = document.querySelectorAll('.list-item-img');
        listItems.forEach(function(item) {
          observer.observe(item);
        });
      }

      addObserver();
    </script>
  </body>
</html>

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

兼容浏览器:

desktop:

Mobile:

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

相关文章

  • JavaScript监测ActiveX控件是否已经安装过的代码

    JavaScript监测ActiveX控件是否已经安装过的代码

    这是通用的方法,只需要把唯一的Activex的clsid和任意一个属性或方法名传进来就可以判断了。(找了两个小时才找到 -_-!)
    2008-09-09
  • 十个利用JavaScript实现的爱心动画特效

    十个利用JavaScript实现的爱心动画特效

    情人节将至,程序员证明自己不是直男的时候到啦!小编为大家准备了十个通过JavaScript实现的爱心动画特效,快学起来,到时候给女朋友一个惊喜吧
    2022-02-02
  • js实现加载更多功能实例

    js实现加载更多功能实例

    这篇文章主要介绍了js实现加载更多功能的方法,以实例演示了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下
    2016-10-10
  • CocosCreator经典入门项目之flappybird

    CocosCreator经典入门项目之flappybird

    这篇文章主要介绍了CocosCreator经典入门项目之flappybird,详细说明了制作的每个步骤,还有详尽的代码,对CocosCreator感兴趣的同学,一定要看一下
    2021-04-04
  • javascript实现跳转菜单的具体方法

    javascript实现跳转菜单的具体方法

    这篇文章介绍了javascript实现跳转菜单的具体方法,有需要的朋友可以参考一下
    2013-07-07
  • js跳转页面方法总结

    js跳转页面方法总结

    本篇文章主要是对js跳转页面方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JS中如何克隆对象(深克隆浅克隆递归克隆)

    JS中如何克隆对象(深克隆浅克隆递归克隆)

    这篇文章主要介绍了JS中如何克隆对象(深克隆浅克隆递归克隆)的全面探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • 一文教会你解决js数字精度丢失问题

    一文教会你解决js数字精度丢失问题

    在JavaScript中计算两个十进制数的和,有时候会出现令人惊讶的结果,相信这个大家也都知道了,下面这篇文章主要给大家介绍了关于解决js数字精度丢失问题的相关资料,需要的朋友可以参考下
    2022-08-08
  • JavaScript 解决ajax中parsererror错误案例详解

    JavaScript 解决ajax中parsererror错误案例详解

    这篇文章主要介绍了JavaScript 解决ajax中parsererror错误案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • 详解网站中图片日常使用以及优化手法

    详解网站中图片日常使用以及优化手法

    一直都觉得网站优化的重点是图片,图片的使用也是博大精深。本文将总结一下图片的日常使用以及优化手法,下面跟着小编一起来看下吧
    2017-01-01

最新评论