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实现图片懒加载的更多相关文章

  1. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  2. VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  3. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  4. 原生js - 两种图片懒加载实现原理

    目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...

  5. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  6. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  7. webapp图片懒加载实现

    图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...

  8. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  9. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

随机推荐

  1. Jmeter+Ant+Jenkins接口自动化测试（二）_测试方案设计及jmeter脚本开发

    前言 根据之前部署好的测试环境,进行接口自动化测试的方案设计及Jmeter脚本开发.测试方案设计过程中采用了数据分离和对象分离等思路,因此直接通过特定的测试用例文档来驱动整个自动化接口测试的执行,相关 ...

  2. 基于telegraf+influxdb+grafana进行postgresql数据库监控

    前言 随着公司postgresql数据库被广泛应用,尤其是最近多个项目在做性能测试的时候都是基于postgresql的数据库,为了确定性能瓶颈是否会出现在数据库中,数据库监控也被我推上了日程.在网上找 ...

  3. [经验分享]WebAPI中返回类型JsonMessage的应用

    这是一个绝无仅有的好类型,一个你爱不释手的好类型,好了,不扯了,直接上干货. 相信大家都知道,在调用接口的时候返回Json数据已经成为一种不成文的标准,因为它的解析快,易读等优秀的特性,所以被绝大多数 ...

  4. 【ASP.NET Core】运行原理(4):授权

    本系列将分析ASP.NET Core运行原理 [ASP.NET Core]运行原理(1):创建WebHost [ASP.NET Core]运行原理(2):启动WebHost [ASP.NET Core ...

  5. 正则表达过滤表单隐藏元素，组装post数据

    <form name="form1" action="'.$serverUrl.'" method="post" > <i ...

  6. Use Zabbix Monitor Find ‘DBCC CheckDB’ Problem

    下面是修改前后的对比截图: 如下图: 下图是确定问题并修改后对比图,左边圈是修改前,右边圈是修改后对比截图:当看到周期性的性能指数,一般是计划性任务引起:通过DMV视图,找到引起等待的原因检查数据库完 ...

  7. css实现切角效果

    1. 一个切角 思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...

  8. TCP协议详解（一）

    Tcp协议作为传输层的重要协议之一,想必每个稍有网络编程知识的人都不会感觉到陌生,三次握手/四次挥手这些基本概念也都是耳熟能详.但是当你们进行具体的网络编程的时候发现有很多事情并没有想象中的那么简单, ...

  9. "软件随想录" 读书笔记

    人员管理: 三种方法: 军事化管理方法, 经济利益驱动法, 认同法. 军事化管理方法不行. 经济利益驱动法也不行. 认同法, 其中一条建议是一起干活的人一起吃饭. 但这种做法比较困难. 设计的作用 寸 ...

  10. MVVMLight 1：MVVMLight介绍以及在项目中的使用

    一.MVVM 和 MVVMLight介绍 MVVM是Model-View-ViewModel的简写.类似于目前比较流行的MVC.MVP设计模式,主要目的是为了分离视图(View)和模型(Model)的 ...