一、方法
加载完成再显示：借助Image对象的onload事件，加载完时再把src赋给img标签的src；
淡人显示：起始opacity为0，利用transform过度到1
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
border: 0;
}
.backgroundShow{
position: absolute;
left: 0;
top: 0;
z-index: -1;
//overflow: hidden;
overflow: scroll;
width: 80%;
height:80%;
}
.backgroundImg{
position: absolute;
left: 0;
top: 0;
z-index: -2;
} .lay_background_img{
transition: opacity 20s ease;
opacity: 0;
}
</style>
</head>
<body>
<div class="backgroundShow">
<img id="mybgimg" class="lay_background_img backgroundImg">
</div>
</body>
<script>
+function(){
loadImage('http://z.k1982.com/show_img/201303/2013033012383895.jpg',imgLoaded);
}(); function loadImage(url, callback) {
var img = new Image();
img.src = url;
img.onload = function(){ //图片下载完毕时异步调用callback函数。
callback.call(img); // 将callback函数this指针切换为img。
};
} function imgLoaded(){
var img = document.getElementById("mybgimg");
img.setAttribute("src",this.src);
if(img.style.opacity!=undefined){
img.style.opacity=1;
}
}
</script>
</html>