Bootstrap

js虚拟代理实现图片的预加载

<h1>虚拟代理实现图片的预加载</h1>
   <p>在Web开发中,图片预加载是一种常见的技术,如果直接给某个img标签节点这只src属性,由于图片过大或者网络不佳,图片的位置往往有一片
   	空白。常见的做法是先用一张loading图片占位,然后用异步的方式加载图片,等图片加载好了再把它填充到img节点里,这种场景就很适合是用虚拟代理。</p>
   	<script>
   	   var myImage = (function(){
   	       var imgNode = document.createElement("img");
   	       document.body.appendChild(imgNode);
   	       
   	       return {
   	          setSrc: function(src){
   	             imgNode.src = src;
   	          }
   	       }
   	   }());
   	   
   	   var proxyImage = (function(){
   	      var img = new Image();
   	      img.onload = function(){
   	         myImage.setSrc( this.src );
   	      }
   	      
   	      return {
   	         setSrc: function(src){
   	             myImage.setSrc( "loading.gif" );
   	             img.src = src;
   	         }
   	      }
   	   });
   	   
   	   proxyImage.setSrc("target.gif");
   	</script>
   	<p>现在我们通过proxyImage间接的访问myImage.proxyImage控制了客户对myImage的访问,并在此过程中加入
   	了一些额外的操作,比如在真正的图片加载好之前,先把Img节点的src设置成一张本地的loading.gif图片.</p>
   	<h1>代理模式的意义</h1>
   	<p>为了说明代理模式的意义,就不得不引入面向对象设计的原则——单一职责原则</p>
   	<p>单一职责原则指的是,就一个类(通常也包括对象和函数)而言,应该仅有一个引起他变化的原因。如果一个对象承担了多项
   	职责,就意味着这个对象将变得巨大,因其他变化的原因可能会有多个。</p>
   	<p>面向对象设计鼓励奖行为分不到细粒度的对象之中,如果一个对象承担的职责过多,等于把这些指责耦合到一起,这种耦合会导致
   	脆弱和低内聚的设计。当他发生变化时,设计可能会遭到意外的破坏。</p>
   	<p>另外,在面向对象的程序设计中,大多数情况下,若违反其他任何原则,同时将违反开放——封闭原则。</p>
   	<h1>代理和本体接口的一致性</h1>
   	<p>如果有一天我们不需要预加载,那么久不需要代理对象,可以选择直接请求本体。其中的关键是代理对象和本体对象都提供了setSrc方法,用户并不清楚代理和本体的区别,
   	这样做有两个好处:1.用户可以放心请求代理,他关心是否能得到想要的结果;2.在任何使用本体的地方都可以替换成使用代理。</p>

;