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

巴特西

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

一、方法

二、代码

三、效果

最新文章

热门文章