1、为什么需要做图片的懒加载【延迟加载】

第一次加载页面的时候，如果请求真实图片资源，会减缓页面的渲染速度，为了提高首次打开的体验度，我们最开始不加载真实的图片资源 只有当第一次页面整体都渲染完成后，页面中已经呈现除图片以外的其它资源后，再去按需加载真实的图片资源渲染

  • 进一步优化，最开始只加载首屏需要的图片，等到滚动条滚动的时候，再把当前屏幕中需要渲染的图片加载(避免不必要的资源加载)
    • 1)给需要延迟加载的图片设置一个外层盒子，图片在这个盒子中
    • 2)我们把图片的SRC设置为空，把后续需要请求的真实图片地址赋值给IMG的自定义属性
    • 3)在最开始渲染的样式中
      • ->给外层的盒子设置等待加载的背景LoGo(或者是背景颜色，图片一定要非常小，最好控制在5KB以内)，让盒子起到一个占位的作用
      • ->让所有的SRc为空的IAG默认是隐藏的
    • 4）需要等到页面加载完成后(除图片资源，其她资源都加载完成了 window.onload)，在JS中获取真实图片的地址，赋值给其SRC（此时才去加载真实的图片进行渲染）

      首屏图片加载

      方法1 =》window.onload 方法2=》settimeout定时器是异步的，它能够触发执行的条件:不仅是到达时间了，而且是主线程已经加载完成（所以可以用它代替window.onload） 不过要比window.onload慢

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="./css/reset.min.css">
  10.     <style>
  11.         /* 当img没有src这个属性  display:none*/
  12.         /* img:not([src]){display:none}  这个在reset.min.css中有*/
  14.         /* 再增加当图片的src为空时也不显示img */
  15.         img[src=""] {
  16.             display: none;
  17.         }
  19.         .lazyImgBox {
  20.             box-sizing: border-box;
  21.             width: 300px;
  22.             height: 500px;
  23.             background: url("./img/default.gif") no-repeat center center #eee;
  25.         }
  26.         .lazyImgBox img {
  27.             width: 100%;
  28.             height: 100%;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="lazyImgBox">
  34.         <img src="" alt="" data-src="./img/x1.jpg">
  35.     </div>
  36. </body>
  37. </html>

JS

  <script>
        let lazyImgbox = document.querySelector('.lazyImgBox'),
            img = lazyImgbox.querySelector('img');
        // window.onload=function(){
        //     // 获取IMG中真实图片地址 data-src 赋值给它的src
        //     let trueSc=img.getAttribute("data-src");
        //     img.src=trueSc;
        //     img.removeAttribute("data-src");
        // };
        setTimeout(function () {
            let trueSc = img.getAttribute("data-src");
            let tempImg = new Image();
            //创建一个临时的图片(它不会增加的页面中，它就是用来检测地址的合法性)
            tempImg.src = trueSc;
            tempImg.onload = function () {
                // 当前地址是正确的(tempImg.onload代表图片能正常加载出来)
                img.src = trueSc;
                img.removeAttribute("data-src");
                tempImg=null;
            }

        }, 1000)
</script>

2、JS加载两个事件

1.真实项目中，我们一般会把JS放在末尾，就是等待DOM结构都加载完成后，我们再去执行的

image.png

2.不放在末尾，还想在DOM结构加载后完成执行

-1).把SCRIPT改成异步的即可

async VS defer async从服务器获取资源是异步的（此时GuI继续渲染)，但是一但资源请求回来，会立即把请求回来的JS执行（此时会阻断Gur的继续渲染)=〉多个asyncJs请求，谁先回来就先执行谁，没有顺序 defer从服务器获取资源是异步的，只不过请求回来资源后没有立即执行，需要等到cUI绘制完成，再去按照顺序把所有请求回来的s逐一执行 async 只能对外联的有用 它控制的加载的过程

<script src="./js/1.js" async>
<script src="./js/1.js" defer>

1.js

let lazyImgbox = document.querySelector('.lazyImgBox');
console.log(lazyImgbox);

-2).或者监听事件，在DOM结构加载完成后在执行这个代码

DOMContentLoaded DOM结构加载完成 load 所有资源都加载完 包含{css} （一定晚于DOMContentLoaded 触发）

window.addEventListener('DOMContentLoaded', function () {
    let lazyImgbox = document.querySelector('.lazyImgBox');
     console.log(lazyImgbox);
});

 window.onload = function () {
      let lazyImgbox = document.querySelector('.lazyImgBox');
      console.log(lazyImgbox);
}