原理

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

实现

思路：在图片没有进入可视区域时，先不给的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. HTTP1.0和HTTP1.1和HTTP2.0的区别

    1 HTTP1.0和HTTP1.1的区别1.1 长连接(Persistent Connection)       HTTP1.1支持长连接和请求的流水线处理,在一个TCP连接上可以传送多个HTTP请求 ...

  2. 使用过滤器获取系统目录或文件名（java.io）

    import java.io.File;import java.io.FilenameFilter; File[] file = new File("D:\\"); //使用Fil ...

  3. 面试问题之操作系统：linux线程API

    https://blog.csdn.net/youwotianya/article/details/80933449

  4. BeanFactory和ApplicationContext有什么区别？

    BeanFactory和ApplicationContext是Spring的两大核心接口,都可以当做Spring的容器.其中ApplicationContext是BeanFactory的子接口. (1 ...

  5. 作为 务注册中心，Eureka比Zookeeper好在哪里?

    (1)Eureka保证的是可用性和分区容错性,Zookeeper 保证的是一致性和分区容错性 . (2)Eureka还有一种自我保护机制,如果在15分钟内超过85%的节点都没有正常的心跳,那么Eure ...

  6. 客户端注册 Watcher 实现 ?

    1.调用 getData()/getChildren()/exist()三个 API,传入 Watcher 对象 2.标记请求 request,封装 Watcher 到 WatchRegistrati ...

  7. 本地连接MySQL云服务器步骤与解决方案

    云服务器:aliyun MySQL 版本:mysql8 第一步首先,检查云服务器的 网络与安全 -> 安全组 是否开放了(MySQL)3306端口 第二步,登陆云服务器上的MySQL,检查需要远 ...

  8. composer安装报错

    问题报错:Fatal error: Declaration of Fxp\Composer\AssetPlugin\Repository\AbstractAssetsRepository::searc ...

  9. 学习openstack（七）

    相关资料: https://www.cnblogs.com/shhnwangjian/category/942049.html https://www.cnblogs.com/goodcook/cat ...

  10. apollo规划控制视频-12basic motion planning and overview