原理

图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

实现

思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。

图片没有进入可视区域，也就是说图片的offsetTop需要小于页面的可视高度，但想一想，当图片在页面的下方的时候呢，需要页面滚动了一段距离之后才能看到图片，所以这里需要满足img.scrollTop < 页面的可视区域高度+页面滚动的高度，这里是实现图片懒加载的关键，接下来看具体代码的实现

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

  </head>

  <style>

    img {

      width: 100%;

      vertical-align: top;

      height: 400px;

    }

  </style>

  <body style="margin-bottom: 500px">

    <img

      src=""

      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"

    />

    <img

      src=""

      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"

    />

    <img

      src=""

      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"

    />

    <img

      src=""

      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"

    />

    <img

      src=""

      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"

    />

    <img

      src=""

      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"

    />

  </body>

  <script>

    let imgArr = Array.from(document.querySelectorAll("img"));

    let n = 0;

    let lazyload = function () {

      for (let i = n; i < imgArr.length; i++) {

        console.log(imgArr[i].offsetTop);

        if (

          imgArr[i].offsetTop <

          document.documentElement.scrollTop + window.innerHeight

        ) {

          imgArr[i].src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0196fa582abab6a84a0d304f899eaf.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653232363&t=49d21374861e863de3d07fc0daee390c";

          let img = new Image();

          img.onload = () => {

            imgArr[i].src = imgArr[i].dataset.src;

          }

          img.src = imgArr[i].dataset.src;

          n = i + 1;

        }

      }

    };

    function _throttle(fn, interval) {

    var last;

    var timer;

    var interval = interval || 200;

    return function () {

        var th = this;

        var args = arguments;

        var now = new Date();

        if (last && now - last < interval) {

            clearTimeout(timer);

            timer = setTimeout(function () {

                last = now;

                fn.apply(th, args);

            }, interval);

        } else {

            last = now;

            fn.apply(th, args);

        }

    }

}

    window.addEventListener("scroll", _throttle(lazyload,1000));

    lazyload();

  </script>

</html>

js实现图片懒加载原理的更多相关文章

  1. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  2. 解析苹果的官方例子LazyTableImages实现图片懒加载原理

    解析苹果的官方例子LazyTableImages实现图片懒加载原理 首先在官网下载源码: https://developer.apple.com/library/ios/navigation/#sec ...

  3. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  4. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  5. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  6. 原生js实现图片懒加载+加入节流

    这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果.现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数. 原理就不多讲了,有需要的可以去大佬的文章看看.大佬文 ...

  7. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  9. js实现图片懒加载

    大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...

随机推荐

  1. 【推理引擎】ONNX 模型解析

    定义模型结构 首先使用 PyTorch 定义一个简单的网络模型: class ConvBnReluBlock(nn.Module): def __init__(self) -> None: su ...

  2. JVM内存模型——堆(heap)、栈(stack)和方法区(method)

      JAVA的JVM的内存可分为3个区:堆(heap).栈(stack)和方法区(method) 堆区:堆内存用于存放由new创建的对象和数组.堆是JVM管理的内存中最大的一块,堆被所有线程共享,目的 ...

  3. Pipeline 有什么好处，为什么要用 pipeline？

    答:可以将多次 IO 往返的时间缩减为一次,前提是 pipeline 执行的指令之间没有 因果相关性.使用 redis-benchmark 进行压测的时候可以发现影响 redis 的 QPS 峰值的一 ...

  4. Redis的集群搭建（四）

    1.redis-cluster架构图 2.redis-cluster投票:容错 架构细节: (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2) ...

  5. 用maven建立一个工程3

    在文件夹里面创建一个新文件夹把工程建立在里面

  6. 4.1 ROS元功能包

    4.1 ROS元功能包 场景:完成ROS中一个系统性的功能,可能涉及到多个功能包,比如实现了机器人导航模块,该模块下有地图.定位.路径规划...等不同的子级功能包.那么调用者安装该模块时,需要逐一的安 ...

  7. 以太网在汽车行业中的挑战——灵活的接口及软件使ECU开发不再复杂

    以太网在汽车行业中的挑战--灵活的接口及软件使ECU开发不再复杂 以太网将会在一批新车型中作为一个车载系统网络使用.因此,下一步就是以太网和现有汽车网络技术的集成,包括:CAN.FlexRay.LIN ...

  8. Anaconda 怎么安装cv2

    Anaconda run python程序的时候,如果有import cv2, 但是遇到报错的时候, 可以考虑在anaconda 中安装opencv, 安装过程非常简单. 什么是opencv , op ...

  9. Ueditor上传本地音频MP3

    遇到一个项目,客户要求能在编辑框中上传录音文件.用的是Ueditor编辑器,但是却不支持本地MP3上传并使用audio标签播放,只能搜索在线MP3,实在有点不方便.这里说一下怎么修改,主要还是利用原来 ...

  10. 删除html标签或标签属性以及样式

    JavaScript module for stripping HTML tags and/or HTML element attributes from strings. 安装 npm instal ...