CSS 图片加载完成再淡入显示

一、方法

加载完成再显示：借助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>

三、效果

http://sandbox.runjs.cn/show/tyjnjlx5