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

Posted March On

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
View Code

三、效果

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

 

以上是关于CSS 图片加载完成再淡入显示的主要内容,如果未能解决你的问题,请参考以下文章

图片轮播-swiper动态加载

淡入淡出轮播图怎么解决闪白的问题

CSS 最简洁hover事件的淡入淡出写法,且不占文档流位置!

vue 图片加载完成事件

js等待图片加载完毕后再显示

怎么让网页加载完成后再显示