用代理模式实现图片懒加载 - qingqinggit/- GitHub Wiki

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
   
  </style>
</head>
<body>
  <div id='demo'></div>
</body>
<script>
function MyImage(_id){
 var oImg = document.createElement('img');
  this.setSrc = function(src){
    oImg.src = src;
  }
  // 要展示的图片
  document.getElementById(_id).appendChild(oImg)
}

var ProxyImage = (function(){
  // 代理图片，用来请求资源
  var oImg = document.createElement('img');
  var myImage = new MyImage('demo');
  // 当代理图片请求完成时，替换原图片为新的图片地址
  oImg.onload = function(){
    setTimeout(() => {
      myImage.setSrc(oImg.src)
    }, 2000);
  }
  // src1为代理的地址，src2为静态资源
  return function(src1, src2){
    oImg.src = src2;
    myImage.setSrc(src1)
  }
})()
let src2='https://pics5.baidu.com/feed/e61190ef76c6a7ef83e6c1c1a0642956f1de66be.png?token=214eea62d117ebae8f95dd92ff55be39'
ProxyImage('./hand.jpg', src2)



</script>
</html>

Promise

⚠️ **GitHub.com Fallback** ⚠️