zoukankan      html  css  js  c++  java
  • JS 图片延迟加载/懒加载

    图片延迟加载/懒加载

    作用:
    保证页面打开的速度(1s之内如果首页打不开就已经算是死亡页面了)

    原理:
    1.对于首屏内容中的图片:

    首先给对应的区域一张默认图片占着位置(默认图需要非常的小, 一般可以维持在5kb以内, 1kb是最好的), 当首屏内容都加载完成后(或者也可以给一个延迟的时间), 我在开始加载真实的图片

    2.对于其他屏的图片

    也是给一张默认的图片占位, 当滚动条滚动到对应区域的时候, 我们再开始加载真实的图片

    数据的异步加载

    开始只把前两屏的数据加载绑定出来, 后面的数据不进行处理, 当页面滚动到对应区域的时候在重新请求数据然后绑定渲染数据

    单图片懒加载

    <!--
     * @Author: lemon
     * @Date: 2020-09-13 21:44:05
     * @LastEditTime: 2020-09-13 22:37:33
     * @LastEditors: Please set LastEditors
     * @Description: In User Settings Edit
     * @FilePath: React前端准备CSS基础异步编程图片延迟加载.html
    -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        #box {
          margin: 100px;
          padding: 30px;
           200px;
          height: 200px;
          border: 10px solid green;
        }
        img {
          display: block;
          border: none;
        }
        .banner {
          margin: 10px auto;
           300px;
          height: 150px;
          border: 1px solid green;
          background: url("../../img/default.gif") no-repeat center center;
        }
        .banner img {
          display: none; /*在开始的时候IMG的SRC属性没有地址, 这样的话再IE浏览器中容器中会显示一张碎图,不美观, 所以我们让其默认隐藏, 当真实图片加载的时候我们再让它显示*/
           100%;
          height: 100%;
        }
      </style>
      <body>
        <div class="banner">
          <img id="e" src="" alt="" trueImg="../../img/1.png" />
        </div>
      </body>
      <script>
        var timer = window.setInterval(function () {
          var img = document.getElementsByTagName("img");
          var e = document.getElementById("e");
          // e.src = e.getAttribute("trueImg");
          // e.style.display = "block";
          // 以上处理还是不完整的: 如果我们获取的真实图片地址是错误的, 当赋值给IMG的SRC属性的时候, 不仅控制会报错, 而且页面中也会出现碎图/叉图, 影响视觉效果
          // 获取图片的地址, 验证地址的有效性, 是有效的才赋值, 不是有效的是不进行赋值处理的
          var oImg = document.createElement("img"); //创建一个临时的IMG标签
          oImg.src = e.getAttribute("trueImg");
          oImg.onload = function () {
            e.src = this.src;
            e.style.display = "block";
            oImg = null;
            console.log("图片加载完成....");
            var nowTime = new Date();
            console.log("用了", nowTime - time, "毫秒");
          };
          console.log("图片正在加载中....");
          window.clearInterval(timer);
          var time = new Date();
        }, 1000);
      </script>
    </html>
    
    

    网络性能优化

    • 尽量减少向服务器请求的次数"减少HTTP请求"
    • CSS/JS文件进行合并
    • ICON图片进行合并 -> 雪碧图/ css sprite
    • 图片的延迟加载
    • 数据的异步加载
    • 在移动端, 如果是一个"简单的"宣传页, 尽量把CSS和JS写成内嵌式

    多张图片懒加载

    多张图片懒加载, 当视图窗口第一次移动置图片时图片才开始加载

    代码
    
    <!--
     * @Author: your name
     * @Date: 2020-09-14 08:54:43
     * @LastEditTime: 2020-09-14 10:41:40
     * @LastEditors: Please set LastEditors
     * @Description: In User Settings Edit
     * @FilePath: React前端准备CSS基础异步编程多张图片懒加载.html
    -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <!-- 做移动端响应式布局页面, 必须要加META标签: viewport -->
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scal=1.0, minimum-scale=1.0,initial-scale=1.0"
        />
        <title>Document</title>
      </head>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
          font-family: "5FAE8F6F96C59ED1", Helvetica, sans-serif;
          font-size: 14px;
        }
        ul,
        li {
          list-style: none;
        }
        img {
          display: block;
          border: none;
        }
        /*最外层容器是不设定固定的宽高的*/
        .news {
          padding: 10px;
        }
        .news li {
          position: relative;
          padding: 10px 0;
          height: 60px;
          border-bottom: 1px dashed #ccc;
        }
        .news li > div:nth-child(1) {
          position: absolute;
          top: 10px;
          left: 0;
           75px;
          height: 60px;
          background: url("../../img/default.gif") no-repeat center center;
          background-size: 100% 100%;
        }
        .news li > div:nth-child(1) img {
           100%;
          height: 100%;
          visibility: hidden;
        }
        .news li > div:last-child {
          margin-left: 80px;
          height: 60px;
        }
        .news li > div:last-child h2 {
          height: 20px;
          line-height: 20px;
          /* 实现文字超出一行自动裁切 */
          overflow: hidden;
          text-overflow: ellipsis; /*裁切的部分以三个省略号代表*/
          white-space: nowrap; /*强制不换行*/
        }
        .news li > div:last-child p {
          line-height: 20px;
          font-size: 12px;
          color: #616161;
        }
      </style>
      <body>
        <ul class="news" id="news">
          <li>
            <div>
              <img src="" trueImg="../../img/1.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/2.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/3.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/3.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/3.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/3.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/3.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/3.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
          <li>
            <div>
              <img src="" trueImg="../../img/3.png" alt="" />
            </div>
            <div>
              <h2>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样</h2>
              <p>要得到你必须要付出,要付出你放弃公平的,,去决定自己生活的样子</p>
            </div>
          </li>
        </ul>
      </body>
      <script>
        var imgList = document.getElementsByTagName("img");
        function lazyImg(curImg) {
          var oImg = document.createElement("img");
          oImg.src = curImg.getAttribute("trueImg");
          oImg.onload = function () {
            curImg.src = this.src;
            curImg.style.visibility = "visible";
            oImg = null;
          };
          curImg.isLoad = true;
        }
        var A = 0;
        // 循环处理每一张图片
        function handleAllImg() {
          for (var i = 0, len = imgList.length; i < len; i++) {
            var curImg = imgList[i];
            // 当前的图片处理过的话, 就不需要在重新的进行处理了
            if (curImg.isLoad) {
              continue;
            }
            // 只有A<B的时候在进行处理: 当前图片是隐藏的, 我们计算的A的值其实是计算它父亲(容器)的值
            var curImgPar = curImg.parentNode;
            var win = document.documentElement;
            // console.log(curImg.offsetHeight, curImgPar.offsetHeight);
            var A = curImg.parentNode.parentNode.offsetTop + curImgPar.offsetHeight;
            var B = win.clientHeight + win.scrollTop;
            if (A < B) {
              lazyImg(curImg);
            }
          }
        }
        // 开始的时候(过500ms加载第一屏幕的图片), 滚动条滚动的时候加载其他图片
        window.setTimeout(handleAllImg, 500);
        window.onscroll = handleAllImg;
      </script>
    </html>
    
  • 相关阅读:
    MySQL_解决ERROR 2006 (HY000) at line XX MySQL server has gone away问题
    mysql全量备份脚本
    mysql增量备份脚本
    使用u32过滤器设置基于mac地址的下载限制
    Quantum & r2q
    关于limit hashlimit资料整理
    u32 mac以及arp匹配
    Iptables 规则 一些简单实例和详细介绍
    Optimizing shaper — hashing filters (HTB)
    使用ingress qdisc和ifb进行qos
  • 原文地址:https://www.cnblogs.com/xiaoxu-xmy/p/13663875.html
Copyright © 2011-2022 走看看