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实现图片懒加载的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • IntersectionObserver API 详解篇

    IntersectionObserver API 详解篇

    温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未来很难保证向后兼容,所以禁用了这个 API,需要手动打开 dom.IntersectionObserver.enabled 才行. IntersectionObserver API 是用来监视某个元素是否滚动进了浏览器窗口的可视区域(视口)或者滚动进了它的某个祖先元素的可视区域内.它的主要功能是用来

  • js图片延迟加载(Lazyload)三种实现方式

    js图片延迟加载(Lazyload)三种实现方式

    延迟加载也称为惰性加载,即在长网页中延迟加载图像. 用户滚动到它们之前,视口外的图像不会加载. 这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快. 在某些情况下,它还可以帮助减少服务器负载. 延迟加载的优点: 提升用户的体验,如果图片数量较大,打开页面的时候要将将页面上所有的图片全部获取加载,很可能会出现卡顿现象,影响用户体验.因此,有选择性地请求图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担. 方法一 将页面上所有图片的src属性设置为loading.gif,而图片

  • IntersectionObserver实现图片懒加载的示例

    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>

  • 微信小程序实现图片懒加载的示例代码

    本文主要介绍微信小程序的模拟图片懒加载,实现的原理是通过页面预加载图片(默认图),加载完成后再显示出来原图,而非真正意义上的懒加载(跟web的懒加载还有很大的差距),只是借此提高用户体验度. 多图片懒加载 1.xml页面 <block wx:for="{{list}}" wx:key=""> <image class='relative width-100 mgb-20 fade_in' src='{{item.cover_url}}' mode=

  • 快速实现JS图片懒加载(可视区域加载)示例代码

    快速实现JS图片懒加载(可视区域加载)示例代码

    js懒加载图片 如何提高网页加载速度?在网页中有许多img标签,这些标签就是图片,其属性src则是指向服务器地址,当浏览器从上往下读取到src标签中的地址时,浏览器就会开启线程,加载这张图片.而并不是等到整张页面都解析完成才加载图片.我们要做的就是加载用户可视范围内的图片. js懒加载图片的目的 1.网页优化,提高网页加载速度 2.页面优化友好,提高SEO收录与排名 3.提高用户体验,减少服务器压力 实例代码如下: <!DOCTYPE html> <html lang="en&

  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

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

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • Javascript实现图片懒加载插件的方法

    前言 网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度,具体实现的技术并不复杂,下面分别对其说明. Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制. 这里需要注意的是: img在初

  • JavaScript实现图片懒加载的方法分析

    本文实例讲述了JavaScript实现图片懒加载的方法.分享给大家供大家参考,具体如下: 懒加载是非常实用的提升网页性能的方式,当访问一个页面的时候,只显示可视区域内的图片,其它的图片只有出现在可视区域内的时候才会被请求加载. 我们现在用原生的js实现简单的图片懒加载,主要利用的原理就是先不给设置src,而是把图片的路径放在data-src中,等待图片被加载的时候将路径取出放到src中. HTML代码 <div class="container"> <div clas

  • JS图片懒加载的优点及实现原理

    这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 图片懒加载优势: 增强用户体验 优化代码 减少http的请求 减少服务器端压力 服务器的按需加载 图片懒加载原理: 先将图片的src设置为同一张图片或者不设置,同时给img标签设置一个特殊属性,例如:data-src用于存放图片的真实预览地址:若图片未进入可视区域时,展示同一张图片或者直接不展示图片,此时就不会发生http请求,当图片进入可视区域时,

  • vue实现图片懒加载的方法分析

    本文实例讲述了vue实现图片懒加载的方法.分享给大家供大家参考,具体如下: vue图片懒加载使用 首先第一步,安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad from 'vue-lazyload' 使用 Vue.use(VueLazyLoad,{ error:'', //加载失败的图 loading:'' //加载中的默认图 }) 这是一个最简单的配置 官方的详细扩展配置文

  • vue3+typescript实现图片懒加载插件

    github项目地址: github.com/murongg/vue- 求star 与 issues 我文采不好,可能写的文章不咋样,有什么问题可以在留言区评论,我会尽力解答 本项目已经发布到npm 安装: $ npm i vue3-lazyload # or $ yarn add vue3-lazyload 需求分析 支持自定义 loading 图片,图片加载状态时使用此图片 支持自定义 error 图片,图片加载失败后使用此图片 支持 lifecycle hooks,类似于 vue 的生命周

随机推荐