前端优化（大图片加载从模糊到清晰）前言我们在开发过程中，经常会遇到很大的图片（如banner图），当网络比较慢的时候，

前言

我们在开发过程中，经常会遇到很大的图片（如banner图），当网络比较慢的时候，请求到很大的图片，白屏时间较长。所以，本文采用了一种方法缩减了白屏时间。主要策略是：先加载大图对应的小图，等大图加载好以后进行替换。

1.准备好两张图，一个大图，一个小图

微信图片_20220321142700.png

2.在html中先加载小图，并将小图进行模糊处理

html引入图片路径,写好一个thumbnails类

<img class="thumbnails" src="./img/bg_min.jpg">

写好样式：thumbnails为一开始模糊的图，complete为加载大图完成后不模糊的样式

 .thumbnails {
      filter: blur(4px);// 模糊处理
      transition: all 0.7s;
  }
  .complete {
      filter: blur(0);
  }

初识页面就是现在这个效果了

微信图片_20220321153444.png

3.通过js，创建一个Image加载大图，加载大图完毕后替换一开始加载的小图的src

// 可进行封装，为多个大图进行由模糊到清晰的处理
  let ele = document.querySelector('.thumbnails');
  let imgUrl = './img/bg.png';
  let imgObject = new Image();

  imgObject.src = imgUrl;
  imgObject.onload = function () {
    ele.src = imgUrl;
    ele.setAttribute('class', 'thumbnails complete');
  }

完整代码示例

<!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">
  <script src="../common/jquery-3.4.1.min.js" type="text/javascript"></script>
  <title>图片从模糊到清楚</title>
  <style>
    .content {
      position: relative;
    }

    .thumbnails {
      width: 1000px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      filter: blur(4px);
      transition: all 0.7s;
    }

    .complete {
      filter: blur(0);
    }
  </style>
</head>

<body>
  <h3>大图片加载从模糊到清晰</h3>
  <!-- 一开始加载不清楚的图片 -->
  <div class="content">
    <img class="thumbnails" src="./img/bg_min.jpg">
  </div>
</body>
<script>
  var ele = document.querySelector('.thumbnails');
  var imgUrl = './img/bg.png';
  var imgObject = new Image();

  imgObject.src = imgUrl;
  imgObject.onload = function () {
    ele.src = imgUrl;
    ele.setAttribute('class', 'thumbnails complete');
  }
</script>

</html>

效果演示

图片从模糊到清楚的效果就完成了

微信图片_20220321154131.png