IntersectionObserver实现图片懒加载的示例


Posted in Javascript onSeptember 29, 2017

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:

IntersectionObserver实现图片懒加载的示例

Mobile:

IntersectionObserver实现图片懒加载的示例

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

Javascript 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 #Javascript
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
微信禁止下拉查看URL的处理方法
Sep 28 #Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 #Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 #Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 #Javascript
You might like
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
JavaScript实现京东快递单号查询
2020/11/30 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python类的多重继承问题深入分析
2014/11/09 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Django REST framework视图的用法
2019/01/16 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
恐龙的灭绝教学反思
2014/02/12 职场文书
主要负责人任命书
2014/06/06 职场文书
学校与家长安全责任书
2014/07/23 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android