1.代理模式
代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问
1.1 一般的图片加载
var myImage=(function () {
var imgNode=document.createElement('img');
document.body.appendChild(imgNode);
return {
setSrc: function (src) {
imgNode.src=src;
}
}
}
)();
myImage.setSrc('http://xxx.com/xxx.jpg');
1.2 虚拟代理实现图片预加载
web开发中，图片预加载常见做法是先用一张loading图片占位，然后用异步的方式加载图片，图片加载完成再用它填充到img节点里
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('http://xxx.com/xxx.jpg');
1.3 不用代理的预加载图片实现方式
var MyImage=(function () {
var imgNode=document.createElement('img');
document.body.appendChild(imgNode);
var img=new Image();
img.onload= function () {
imgNode.src=img.src;
};
return {
setSrc: function (src) {
imgNode.src='loading.gif';
img.src=src;
}
}
})();
MyImage.setSrc('http://xxx.com/xxx.jpg');
上述代码不通过代理模式，也可以实现图片预加载
但是上述代码，违反了单一职责原则
代码中，MyImage对象除了复制给img节点设置src，还要复制预加载图片