Bootstrap

代理模式 虚拟代理实现图片预加载

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。

在Web开发中,图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会是一片空白。常见做法是先用一张loading图片占位,然后用异步的方式加载图片,等图片加载好了再把它填充到img节点里,这种场景就适合使用虚拟代理。

创建一个普通本体对象,负责往页面中创建一个img标签并对外提供一个setSrc接口:

    var myImage = (function() {
      var imgNode = document.createElement('img')
      document.body.appendChild(imgNode)
      return function(src) {
        imgNode.src = src
      }
    })()

此时可以直接使用这个对象去创建img标签并设置src展示图片:

    myImage('./test/picture.png') // 正式需要加载的图片

为了达到预加载效果,我们引入代理对象:

    var proxyImage = (function() {
      var img = new Image
      img.onload = function() {
        myImage(this.src)
      }
      return function(src) {
        myImage('./test/loading.gif') // 过度gif
        img.src = src
      }
    })()

将图片地址传给代理对象来实现懒加载效果:

    proxyImage('./test/picture.png') // 正式需要加载的图片

代理方法一边加载真实地址的图片,一边先调用myImage展示loading动画。等实际图片onload完毕再次调用myImage展示实际图片,全过程myImage会被调用两次。

其实一个懒加载,一个方法就可以搞定,但是在这里拆成了代理模式来做的意义是为了符合——单一职责原则。指的是,就一个类(通常也包括对象和函数等)而言,应该仅有一个引起它变化的原因。如果一个对象承担了多项职责,就意味着对象变得巨大,等于多个职责耦合到一起,这种耦合会导致脆弱和低内聚的设计。

;