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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Preload基础使用方法详解
Feb 03 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
Symfony查询方法实例小结
2017/06/28 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
python根据文件大小打log日志
2014/10/09 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
家教广告词
2014/03/19 职场文书
党员干部承诺书范文
2014/03/25 职场文书
保密协议书范本
2014/04/22 职场文书
物流管理专业求职信
2014/05/29 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
北京导游词
2015/02/12 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
男人帮观后感
2015/06/18 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
教你怎么用Python操作MySql数据库
2021/05/31 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android