懒加载

页面运行到浏览器，图片是不立即进行加载的。

懒加载的优势

  1. 保证图片一定能够加载成功，防止破图，增强用户体验。
  2. 有利于性能优化。

懒加载的实现

  1. 在css中设置占位背景图，并将图片设置为display:none；
  2. 将真实的图片的地址放到结构的自定义属性上，不直接给到图片的src；
  3. 保证这个图片的地址是正确的，在赋值给这个图片的src；

首屏页面

保证图片资源一定能够加载成功才去加载当前这张图片，即延迟一定时间去展示图片。

步骤：

  1. 先弄一个占位背景图；
  2. 默认图片是隐藏的；
  3. 创建一个临时的图片；
  4. 将真实图片的地址赋值给当前这个临时图片的src；
  5. 判断当前这个图片资源是否加载成功；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 200px;
        height: 200px;
        /* 1.先弄一个占位背景图 */
        background: url(./img/loading.gif) no-repeat center #efefef;
        margin: 50px auto;
    }

    .box img {
        width: 100%;
        height: 100%;
        border: none;
        /* 2.默认图片是隐藏的 */
        /*注：图片隐藏了display:none 由于不站位,js盒模型的13个属性是获取不到值的 */
        display: none;
    }
</style>
1
2
3
<div class="box">
    <img src="" trueSrc="./img/0.jpg" class="img">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var box = document.getElementsByClassName('box')[0];
var img = document.getElementsByClassName('img')[0];
// 页面运行到浏览器(1s后展示)
window.setTimeout(imgLazy, 1000);
function imgLazy() {
    // 3.先创建一个临时的图片
    var oImg = document.createElement("img");
    // 4.将真实图片的地址赋值给当前这个临时图片的src
    oImg.src = img.getAttribute('trueSrc');
    // 5.判断当前这个图片资源是否加载成功   
    oImg.onload = function () {//加载成功才会执行
        img.src = this.src;
        img.style.display = "block";
    }
}

其他屏页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
      * {
          padding: 0;
          margin: 0;
      }

      html {
          height: 2000px;
      }

      .box {
          width: 200px;
          height: 200px;
          margin: 1000px auto;
          /* 1.背景图占位 */
          background: url(./img/loading.gif) no-repeat center #ededed;
      }

      .box img {
          width: 100%;
          height: 100%;
          border: none;
          /* 2.设置隐藏 */
          /* display none不占位,js的13个属性获取不到值 */
          display: none;
      }
  </style>
1
2
3
<div class="box">
      <img src="" trueSrc="./img/0.jpg" class="img">
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var box = document.getElementsByClassName('box')[0];
var img = document.getElementsByClassName('img')[0];
var winH = document.documentElement.clientHeight;

window.onscroll = function () {
    var scrollT = document.documentElement.scrollTop;
    // 判断：首屏高度+滚动条滚去的高度>=图片底部到body的距离
    // 因为图片display:none,不占位,所以js盒模型的13个属性获取不到,故改用其父亲
    if (winH + scrollT >= img.parentNode.offsetTop + img.parentNode.clientHeight) {
        imgLazy();
    }
}
function imgLazy() {
    // 3.动态创建img标签
    var oImg = document.createElement('img');
     // 4.将真实图片的地址赋值给当前这个临时图片的src
    oImg.src = img.getAttribute('trueSrc');
     // 5.判断当前这个图片资源是否加载成功   
    oImg.onload = function () {
        img.src = this.src;
        img.style.display = "block";
    }
}