SOURCE

window.onload = function() {
  // 解决图片懒加载,非代理模式
  let myImage = (function() {
    let imgNode = document.createElement('img'); // 创建图片节点
    document.body.appendChild(imgNode); // 把图片节点放到body
    let img = new Image(); // 代理对象 负责显示等待图片，接着拉取真实图片
    img.onload = function() { // 当真实图片加载完毕后触发
      imgNode.src = this.src; // 用真实图片地址替换等待图片地址， this指向img
    }
    return { // 返回一个对象  
      setSrc: function(src) {
        // 首先展示等待的代理图片地址
        imgNode.src = 'https://img0.baidu.com/it/u=551459933,3665289128&fm=26&fmt=auto';
        setTimeout(() => {
          img.src = src; //  把真实图片地址给到代理对象
        }, 1000);
      }
    }
  })() // 自执行函数
  // 把真实图片地址给到 myImage
  myImage.setSrc('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F27%2F20150727130241_YaEmh.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639276622&t=28504ee3f76602e1d91785bf6ff4cdc5')
}