原理

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

实现

思路：在图片没有进入可视区域时，先不给的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. HTTPS-各种加密方式

    推荐阅读:https://www.cnblogs.com/zwtblog/tag/计算机网络/ 目录 HTTPS 对称加密(AES) 非对称加密(RSA) 工作过程 分析 优缺点 常用算法 混合加密 ...

  2. 如何选择 Linux 操作系统版本?

    一般来讲,桌面用户首选 Ubuntu :服务器首选 RHEL 或 CentOS ,两者中首选 CentOS .根据具体要求:· 安全性要求较高,则选择 Debian 或者 FreeBSD .· 需要使 ...

  3. web端,app端,小程序端测试差异详解

    前置解释:1.单纯从功能测试的层面上来讲的话,APP 测试.web 测试和H5测试在流程和功能测试上是没有区别的2.Web项目或pc项目都是在电脑上进行测试的.常见的PC项目架构有BS架构和CS架构的 ...

  4. Java并发机制（1）--线程状态与方法（转）

    Java并发编程:Thread类的使用 个人总结:参考:博客园-海子-http://www.cnblogs.com/dolphin0520/p/3920357.html 参考:https://blog ...

  5. 用 Java 写一个线程安全的单例模式（Singleton）？

    请参考答案中的示例代码,这里面一步一步教你创建一个线程安全的 Java 单例类.当我们说线程安全时,意思是即使初始化是在多线程环境中,仍然能保证单个实例.Java 中,使用枚举作为单例类是最简单的方式 ...

  6. Vue报错之" [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

    一.报错截图 [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component corre ...

  7. Linux中一切皆文件

    谈一谈Linux中一切皆文件 1. Linux中所有内容都是以文件的形式保存和管理,即:一切皆文件. 普通文件是文件. 目录(在win下称为文件夹)是文件. 硬件设备(键盘.硬盘.打印机)是文件. 套 ...

  8. carsim输入输出变量

    来自:https://wenku.baidu.com/view/3405ded5443610661ed9ad51f01dc281e43a5673.html 输出量

  9. 微信小程序答题，怎么设计页面渲染，答完一题，跳到下一题

    想要的效果 1.第一页只显示第一道题的内容,如图红框2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml <!--pages/answer/answer.wxml--&g ...

  10. 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...