<style type="text/css">
body{margin: 0px; padding: 0px;}
.dd{border: 0px solid red; height: 800px;}
#pics{width: 90%; margin: 0px auto;}
#pics dl{width: 32%; float: left; margin-left: 1%; margin-top: 2%;}
#pics dl img{width: 100%; height: auto;}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="dd">
<img src="img/ban0.jpg" id="pic"/>
</div>
<script type="text/javascript">
$(function(){
//预加载
function loadPic(url,callback){
var img = new Image(); //创建一个Image对象
img.src = url;
if(img.complete){ //判断浏览器中是否缓存有图片
callback.call(img); //将当前对象重新指向于img对象
return;
}
//img.onload = function(){};
$(img).load(function(){//$(img).load() 要将新new出的img对象加载出来 但不需要重新创造节点
callback.call(img); //将callback的this指向img 那么this.src==img.src 这样的目的是将img.src赋给pic.src
});
}
function loaded(){
var pic = document.getElementById("pic");
pic.src = this.src;
}
setTimeout(function(){
loadPic("img/ban1.jpg",loaded)
},100);
});
</script>
预加载图片的目的主要是优化性能 先加载一张内存较小的模糊图片（内存小加载速度快） 然后再加载一张高清的
body{margin: 0px; padding: 0px;}
.dd{border: 0px solid red; height: 800px;}
#pics{width: 90%; margin: 0px auto;}
#pics dl{width: 32%; float: left; margin-left: 1%; margin-top: 2%;}
#pics dl img{width: 100%; height: auto;}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="dd">
<img src="img/ban0.jpg" id="pic"/>
</div>
<script type="text/javascript">
$(function(){
//预加载
function loadPic(url,callback){
var img = new Image(); //创建一个Image对象
img.src = url;
if(img.complete){ //判断浏览器中是否缓存有图片
callback.call(img); //将当前对象重新指向于img对象
return;
}
//img.onload = function(){};
$(img).load(function(){//$(img).load() 要将新new出的img对象加载出来 但不需要重新创造节点
callback.call(img); //将callback的this指向img 那么this.src==img.src 这样的目的是将img.src赋给pic.src
});
}
function loaded(){
var pic = document.getElementById("pic");
pic.src = this.src;
}
setTimeout(function(){
loadPic("img/ban1.jpg",loaded)
},100);
});
</script>
预加载图片的目的主要是优化性能 先加载一张内存较小的模糊图片（内存小加载速度快） 然后再加载一张高清的