图片懒加载-----代理模式

最新推荐文章于 2025-04-22 20:07:26 发布

原创最新推荐文章于 2025-04-22 20:07:26 发布 · 397 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何利用代理模式实现图片懒加载。在图片加载过程中，先展示静态占位图片，待图片完全加载后，再替换为实际图片地址，从而优化用户体验并减少页面加载时间。

前言使用代理模式实现懒加载，在资源完成请求之前，使用一张占位图片，当图片完全加载后，将该占位图片链接为新的图片，实现图片的懒加载。

设置一个占位图片（静态资源），myImage
使用代理新建一个图片，让它去请求新资源
当代理图片请求完成后，将占位图片链接为新的图片地址

后续获取资源时，浏览器会将图片缓存起来，提升用户体验

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)
  }
})()
ProxyImage(src1, src2)