CSS picture loading complete and fade in display

First, the method

Loading is complete again: with the onload event of the image object, the SRC of the IMG tag is assigned to SRC after loading;

Light person display: Starting opacity is 0, using transform over to 1

Second, the Code

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Title</title>6     <style>7 body{8 margin:0;9 padding:0;Ten border:0; One         } A . backgroundshow{ - Position:absolute; - left:0; the top:0; - Z-index:-1; - //overflow:hidden; - Overflow:scroll; + width:80%; - height:80%; +         } A . backgroundimg{ at Position:absolute; - left:0; - top:0; - Z-index:-2; -         } -   in . lay_background_img{ - transition:opacity 20s ease; to opacity:0; +         } -     </style> the </Head> * <Body> $     <Divclass= "Backgroundshow">Panax Notoginseng         <imgID= "Mybgimg"class= "Lay_background_img backgroundimg"> -     </Div> the </Body> + <Script> A +function () { the 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 () {/////The picture is downloaded asynchronously when callback functions are called.  the Callback.call (IMG);//Switch The callback function this pointer to IMG.  -         };Wuyi     } the   - function imgloaded () { Wu var img = document.getElementById ("mybgimg"); - img.setattribute ("src", this.src); About if (img.style.opacity!=undefined) { $ Img.style.opacity=1; -         } -     } - </Script> A </HTML>

View CodeThird, the effect

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

CSS picture loading complete and fade in display