一、方法
加载完成再显示：借助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
时间： 2024-10-29 07:59:00