利用原生JS实现懒加载lazyLoad的三种方法总结

目录
  • 前言
  • Method 1: 高度对比
  • Method 2: 使用getBoundingClientRect() 的API
  • Method 3: 采用最新的 IntersectionObserver 构造函数
  • 总结

前言

首先我们先搭建好页面如下:

<style>
    * {
      padding: 0%;
      margin: 0%;
    }

    .contain img {
      width: 600px;
      height: 400px;
    }

    ul {
      list-style: none;
    }

    li {
      display: inline-block;
    }
  </style>

  <div class="contain">
    <ul>
       <li><img data-src="./images/iu.jpg"  src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu1.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu2.png" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu3.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu4.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu5.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu6.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu7.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu8.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu9.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu10.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/zzf_01.jpg" src='./images/lazy.png' alt=""></li>
    </ul>
  </div
>

我们知道,图片懒加载是在滚动条向下滚动时,才判断图片是否到达可视区域

于是我们需要在滚动监听时判断图片是否即将显示,所以我们需要将图片的真实地址先隐藏起来,即采用自定义属性 data-src 保存图片的真实地址,当滚动条滚动到图片能够看到时再加载真实的地址.

下面我们来看第一个方法

Method 1: 高度对比

这里我们采用 (元素距顶部的高度 - 页面被卷去的高度 <=  浏览器可视区的高度) 来判断是否符合我们想要的条件.这里我们需要实时监听页面滚动时 图片的高度变化

/**
 * 方法一
 * 高度对比
 */
 let imgs = [...document.querySelectorAll('img')]; // 先获取所有的图片
 window.addEventListener('scroll', function () {

 })

添加完事件后再继续判断 图片是否达到要求,即

 /**
  * 方法一
  * 高度对比
  */
  let imgs = [...document.querySelectorAll('img')]; // 先获取所有的图片
  window.addEventListener('scroll', function () {
    lazyLoad(imgs)
  })
  function lazyLoad(imgs) {
    for (var i = 0; i < imgs.length; i++) {
      var height = imgs[i].offsetTop; // 图片的距顶部的高度
      var wheight = window.innerHeight; // 浏览器可视区的高度
      var sheight = document.documentElement.scrollTop; // 页面被卷去的高度
      if (height - sheight <= wheight) { // 判断图片是否将要出现
        imgs[i].src = imgs[i].dataset.src; // 出现后将自定义地址转为真实地址
      }
    }
  }

看起来还挺简单的对吧? 不过我们还有更简单的方法,如下:

Method 2: 使用getBoundingClientRect() 的API

先附上MDN 对getBoundingClientRect() 的解释getBoundingClientRect()

我们可以通过 getBoundingClientRect().top来获取元素距视口顶部的距离,于是我们就可以比较getBoundingClientRect().top 和  window.innerHeight 的值的关系来实现懒加载的效果
这里使用了getAttribute()setAttribute()属性

 /**
  * 方法二
  * @params getBoundingClientRect()
  * 可视区API
  */

 let imgs = [...document.querySelectorAll('img')];
 window.addEventListener('scroll', function () {
    imgs.forEach(img => {
      //这里其实和Method1的思想一样,不过就是简洁了一些
      if (img.getBoundingClientRect().top < window.innerHeight) { 

        let dataSrc = img.getAttribute(' data-src'); // 获取 data-src 真实的地址
        img.setAttribute('src', dataSrc); // 将 真实的地址 替换为 src属性
        console.log(img.src);
      }
    })
  })

Method 3: 采用最新的 IntersectionObserver 构造函数

看过上面两种方法,那你是否觉得懒加载还挺简单的对吧?

没错,我们写的代码很少,看起来很简单,但是我们忽略了一个重要的问题:

图片替换为真实的地址之后,如果我们反复的拉动滚动条,会一直触发 if()条件,
   
    所以我在 Method2 方法里给了一个   console.log(img.src);
   
    目的就是为了让你看到当有人持续不断的拉动滚动条,会一直打印 console.log(img.src);

那我们怎么去让图片真实地址加载完之后,不再触发对它的频繁操作呢?或者说怎么优化游览器的性能呢?

好巧不巧,现在有了一个新增的构造函数,来解决我们的频繁触发条件语句的问题.

这个构造函数就是 IntersectionObserver

根据 MDN 上的解释

  • IntersectionObserver()构造器创建并返回一个IntersectionObserver对象。 如果指定rootMargin则会检查其是否符合语法规定,检查阈值以确保全部在0.0到1.0之间,并且阈值列表会按升序排列。如果阈值列表为空,则默认为一个[0.0]的数组。
  • callback当元素可见比例超过指定阈值后,会调用一个回调函数,此回调函数接受两个参数:
    entries一个IntersectionObserverEntry对象的数组,每个被触发的阈值,都或多或少与指定阈值有偏差。
    observer被调用的IntersectionObserver实例。

这里我们只使用第一个参数 callback 这个回调函数

window.addEventListener('scroll', function () {
// 首先我们先实例化这个构造函数
   const observe = new IntersectionObserver(callback);
// 然后写我们需要处理业务的回调函数 callback
   const callback = entries => {
        console.log(entries); //我们先打印一下 entries 看看有什么用
        // 如下图
    };
}

window.addEventListener('scroll', function () {
   const observe = new IntersectionObserver(callback);
// 然后写我们需要处理业务的回调函数 callback
   const callback = entries => {
       // 我们发现它是个数组,于是
       entries.forEach(ele => {
           console.log(ele); // 我们再打印一下元素,看看元素里面有什么
           // 如下图
       })
    };
}

我们找到了 isIntersecting: false 这个属性,这个意思是 是否交叉,根据构造函数的意义我们得知,交叉可以理解为是否被观察到

如果被观察到, 那我们就让他的真实地址替换为 它的 src 属性 ,并且取消对它的观察

 /**
  * 方法三
  * @params   new IntersectionObserver(callback[,options])
  * 观察-->构造函数
  */
  window.addEventListener('scroll', function () {
    let imgs = [...document.querySelectorAll('.img')]
    const callback = entries => { // entries 是观察的元素数组
        entries.forEach(ele => {
            if (ele.isIntersecting) { // isIntersecting  是否被观察到
                const data_src = ele.target.getAttribute('data-src'); //这里基本和 Method1/Method2一样
                ele.target.setAttribute('src', data_src); // ele.target 是目标元素
                observe.unobserve(ele.target) // 真实地址替换后 取消对它的观察
            }
        })
    };
    const observe = new IntersectionObserver(callback); // 实例化 IntersectionObserver
    imgs.forEach(image => {
        observe.observe(image) // observe : 被调用的IntersectionObserver实例。给每个图片添加观察实例
    })
  }

这样处理,我们就可以不再频繁的去触发 if() 条件语句

因为在图片替换了真实地址后,我取消了对当前图片的观察,于是,当前图片已经没有事件再被触发,所以这样对浏览器的性能进行了极大的优化

总结

到此这篇关于利用原生JS实现懒加载lazyLoad的三种方法的文章就介绍到这了,更多相关JS实现懒加载lazyLoad内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

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

  • JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)

    目录: 懒加载的意义(为什么要使用懒加载) 原理 代码 在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区

  • JavaScript实现图片懒加载(Lazyload)

    懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 原理 将页面中的img标签src指向一张小图片或者src为空,然后定义data

  • 原生JS实现图片懒加载(lazyload)实例

    前言 图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码. 实现原理 加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64.雪碧图等:懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片. 具体代码 首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面. <

  • JS实现图片懒加载(lazyload)过程详解

    对于图片较多的页面,使用懒加载可以大幅提高页面加载速度,提高用户体验. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 原理

  • 深入研究jQuery图片懒加载 lazyload.js使用方法

    lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min

  • 图片懒加载imgLazyLoading.js使用详解

    本文主要介绍web前端使用图片懒加载imgLazyLoading ,供大家参考,具体内容如下 1.html代码 //懒加载对象目标代码 <img originalSrc="__PUBLIC__/images/home/icon_pingtuan.png"> //引用本地js <script src="__PUBLIC__/js/imgLazyLoading.min.js"></script> <script src=&quo

  • 利用原生JS实现懒加载lazyLoad的三种方法总结

    目录 前言 Method 1: 高度对比 Method 2: 使用getBoundingClientRect() 的API Method 3: 采用最新的 IntersectionObserver 构造函数 总结 前言 首先我们先搭建好页面如下: <style> * { padding: 0%; margin: 0%; } .contain img { width: 600px; height: 400px; } ul { list-style: none; } li { display: i

  • picturebox加载图片的三种方法与网站验证码的抓取

    第一种:(此方法比较笨) 在页面上隐藏几个需要改变页面上图片的picturebox,比如下面的picFrom 在需要改变图片的方法处先定义: System.Resources.ResourceManager resources = new System.Resources.ResourceManager(typeof(Form1)); 然后就可以改变了(比如picTo的图片要改变成picFrom的图片) this.picTo.Image = ((System.Drawing.Image)(res

  • 前端图片懒加载(lazyload)的实现方法(提高用户体验)

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求. 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处

  • 前端JS图片懒加载原理方案详解

    目录 背景 原理 方案 方案一:img的loading属性设为“lazy” 使用方法 优点 兼容性 缺点 方案二:通过offsetTop来计算是否在可视区域内 优化 优点 缺点 方案三:通过getBoundingClientRect来计算是否在可视区域内 方案四:使用IntersectionObserver来判断是否在可视区域内 兼容性 优点 缺点 问题 布局抖动 响应式图片 SEO不友好 插件 背景 懒加载经常出现在前端面试中,是前端性能优化的常用技巧.懒加载也叫延迟加载,把非关键资源先不加载

  • JS图片懒加载库VueLazyLoad详解

    目录 背景 说明 实现原理 1. placeholder 的实现很细致和灵活 2. 添加图片缓存 3. 事件监听使用节流 4. 监听事件不止滚动事件 5. 事件列队的方式来处理懒加载 6. 支持 data-srcset 7. 自定义控制可视区的判定范围 待完善 1. 没有解决布局抖动 2. 跳过已经加载图片的判断方式 3. 局部懒加载 4. 性能不是很好 5. observer 模式配置简单 6. SEO 不友好 总结 背景 上篇<图片懒加载原理方案详解>中详细解析了图片懒加载的原理和方案.主

  • 原生JS实现DOM加载完成马上执行JS代码的方法

    用原生JS我们经常使用window.onload事件来加载页面.但是window.onload是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行.所以有时我们需要在DOM载入时马上执行一些函数.jQuery提供了document.ready方法用来代替window.onload.但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了.Firefox有

随机推荐