性能优化案例之预加载：代理模式优化加载体验-526互联

前言：

当我们遇见大图片的时候，不想破坏其像素清晰度，又不想让前端体验感差，就可以用预加载的loading图片来展示，等到真正的图片下载完，再替换回来。

代码：

<!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>
<body>
  <h1>性能优化案例</h1>
  <!-- <img class="img1" src="" alt="" width="960"> -->
  <div class="img-con">
    <img class="img2"  src="" alt="" width="540">
  </div>
  <button class="btn1"> 请求图片</button>
  <script>
    //预加载=》代理模式优化加载体验
    let btn1 =  document.querySelector('.btn1')
    btn1.onclick = function(){
      let myImage = (function(){
        let imgNode = document.querySelector('.img2')
        return {
          setSrc:function(src){
            imgNode.src = src
          }
        }
      })()
      let proxyImage = (function(){
        let img = new Image;
        img.onload = function(){
          myImage.setSrc(this.src)
        }
        return {
          setSrc:function(src){
            myImage.setSrc('./loading.gif');
            img.src = src
          }
        }
      })()
      proxyImage.setSrc('./img1.jpg')
    }
  </script>
</body>
</html>