js 代理方式图片预加载
2016-09-19 本文已影响180人
Simon_s
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//设置imgNode 相关对象
var myImage = (function(){
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
//向外部返回一个函数，在这个函数中给imgNode节点设置src(包括展位图的src，要展示的src)
return {
setImg:function(src){
imgNode.src = src;
}
}
})();
//代理：给imgNode设置展位图，请求正式图，替换展位图
var proxyImage = (function(){
//创建出请求数据的img对象
var img = new Image();
//给img的onload事件添加方法:替换imgNode标签上显示的图片
img.onload = function(){
//通过myImage中的setImg函数，给imgNode设置url
myImage.setImg(this.src);
}
//向外部返回函数，在这个函数中给imgNode设置展位图，并让img对象请求数据
return{
setSrc:function (src){
myImage.setImg('img/1.gif');
//让img对象请求传入的src地址
img.src = src;
}
}
})();
proxyImage.setSrc('http://b.hiphotos.baidu.com/image/h%3D360/sign=f25502b14936acaf46e090fa4cd88d03/18d8bc3eb13533fabb31d2a6aad3fd1f40345bb6.jpg');
</script>
</html>
