原理

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

实现

思路：在图片没有进入可视区域时，先不给的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. 七牛云简单实用-uploadManager.put(..)抛出异常

    描述: 本人小白,最近在写一个仿头条的项目,其中有用到七牛云做为图片的存储以代替本地服务其存储,按照视频教程配置服务器端的简单上传功能,总是报错: 参照官方文档:https://developer.q ...

  2. 你是怎么看Spring框架的?

    Spring是一个轻量级的容器,非侵入性的框架.最重要的核心概念是IOC,并提供AOP概念的实现方式,提供对持久层,事务的支持,对当前流行的一些框架(Struts,Hibernate,MVC),Spi ...

  3. 什么是 Executors 框架？

    Executor 框架是一个根据一组执行策略调用,调度,执行和控制的异步任务的框 架. 无限制的创建线程会引起应用程序内存溢出.所以创建一个线程池是个更好的的 解决方案,因为可以限制线程的数量并且可以 ...

  4. java-設計模式-抽象工場模式

    抽象工廠模式AbstractFactory 一种创建型设计模式, 它能创建一系列相关的对象, 而无需指定其具体类. 工廠方法模式中考虑的是一类产品的生产,如畜牧场只养动物.电视机厂只生产电视机,同种类 ...

  5. 如何从https://developer.mozilla.org上查询对象的属性、方法、事件使用说明和示例

    在https://developer.mozilla.org搜索要在前面加上指令 搜索之后点进去 进入之后就是这样的 在页面左边你可以选择自己要查询的对象 里面就是会有属性.方法.事件使用说明和示例.

  6. 关于XML文件

    关于xml文件没有提示(eclipse) 点我

  7. centos下安装配置maven

    下载maven安装包 wget http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.3.9/binaries/apache-maven ...

  8. Redis报错：DENIED Redis is running in protected mode

    转:Redis使用认证密码登录   Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis ...

  9. android SQLite数据库（转）

    Android数据库 之 SQLite数据库   Android数据库  一.关系型数据库SQLIte 每个应用程序都要使用数据,Android应用程序也不例外,Android使用开源的.与操作系统无 ...

  10. Java JDK 动态代理实现和代码分析

    JDK 动态代理 内容 一.动态代理解析 1. 代理模式 2. 为什么要使用动态代理 3. JDK 动态代理简单结构图 4. JDK 动态代理实现步骤 5. JDK 动态代理 API 5.1 java ...