CSS 图片加载完成再淡入显示
一、方法
加载完成再显示：借助Image对象的onload事件，加载完时再把src赋给img标签的src；
淡人显示：起始opacity为0，利用transform过度到1
二、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 .backgroundShow{ 13 position: absolute; 14 left: 0; 15 top: 0; 16 z-index: -1; 17 //overflow: hidden; 18 overflow: scroll; 19 width: 80%; 20 height:80%; 21 } 22 .backgroundImg{ 23 position: absolute; 24 left: 0; 25 top: 0; 26 z-index: -2; 27 } 28 29 .lay_background_img{ 30 transition: opacity 20s ease; 31 opacity: 0; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="backgroundShow"> 37 <img id="mybgimg" class="lay_background_img backgroundImg"> 38 </div> 39 </body> 40 <script> 41 +function(){ 42 loadImage('http://z.k1982.com/show_img/201303/2013033012383895.jpg',imgLoaded); 43 }(); 44 45 function loadImage(url, callback) { 46 var img = new Image(); 47 img.src = url; 48 img.onload = function(){ //图片下载完毕时异步调用callback函数。 49 callback.call(img); // 将callback函数this指针切换为img。 50 }; 51 } 52 53 function imgLoaded(){ 54 var img = document.getElementById("mybgimg"); 55 img.setAttribute("src",this.src); 56 if(img.style.opacity!=undefined){ 57 img.style.opacity=1; 58 } 59 } 60 </script> 61 </html>
三、效果
http://sandbox.runjs.cn/show/tyjnjlx5
