一、方法

加载完成再显示：借助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 图片加载完成再淡入显示的更多相关文章

  1. JavaScript-onerror事件:图片加载失败后不显示

    HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...

  2. vue判断图片为空或者图片加载不成功时显示默认图片

    纯css解决方案: <img src="broken.png" alt=""> img { position: relative; } img:af ...

  3. [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究

    A. 图片的加载:  [UIImage imageNamed:@"home"];  加载png图片    一.非retina屏幕  1.3.5 inch(320 x 480)  * ...

  4. Google推荐——Glide使用详解(图片加载框架)

    零.前言 本文所使用的Glide版本为3.7.0 一.简介 Glide,一个被google所推荐的图片加载库,作者是bumptech.这个库被广泛运用在google的开源项目中,包括2014年的goo ...

  5. android Glide图片加载框架的初探

    一.Glide图片加载框架的简介 谷歌2014年开发者论坛会上介绍的图片加载框架,它让我们在处理不管是网路下载的图片还是本地的图片,减轻了很多工作量, 二.开发步骤: 1.添加链接库 compile ...

  6. Android图片加载神器之Fresco，基于各种使用场景的讲解

    Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...

  7. Android图片加载神器之Fresco， 基于各种使用场景的讲解

    Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...

  8. 图片加载框架之ImageLoader

    Android开发中,多少会接触到异步加载图片,或者加载大量图片的问题,而加载图片我们常常会遇到许多的问题,比如说图片的错乱,OOM等问题,对于这些问题解决起来会比较吃力,比较著名的就是Univers ...

  9. HTML之学习笔记（五）图片加载

    Html图片的处理一般采用<img>标签 语法:                例如<img src="地址" />            地址:      ...

随机推荐

  1. android launchmode(四种启动模式)应用场景及实例

    模式介绍 [1] standard 模式 这是默认模式,每次激活Activity时都会创建Activity实例,并放入任务栈中. [2] singleTop 模式 如果在任务的栈顶正好存在该Activ ...

  2. 89c51中断入口地址表

    中断源   中断入口地址 外部中断0 0003H 定时器/计数器T0 000BH 外部中断1 0013H 定时器/计数器T1 001BH 串行口中断   0023H

  3. Ubuntu 14.04 安装最新稳定版Nginx 1.6.0

    如果已经安装,请先卸载sudo apt-get remove nginx最新的稳定版Nginx 1.6.0在ubuntuupdates ppa库中提供,网址http://www.ubuntuupdat ...

  4. iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片

    Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...

  5. iOS不得姐项目--图片帖子模块,大图默认显示最顶部分的处理

    一.刚开始的处理,设置Mode属性(self.pictureImageView.contentMode = UIViewContentModeScaleAspectFill;) 和 Clip Subv ...

  6. git 常用命令使用

    1. 初始化仓库 git init 2. 查看当前状态 git status(1)Changes not staged for commit:(2)Changes to be committed: 3 ...

  7. 【转】C#判断奇偶数的函数

    // 现代流行的"程序员" public static bool IsOdd(int n) { while (true) { switch (n) { : return true; ...

  8. Windows 8.1 安装Ruby on Rails手记

    最近喜欢上了狂拽酷炫的Ruby 看了诸多文章都是Linux或Mac OS X环境配置,文章末尾还不忘把windows黑成一坨... 表示很无语.. 作为新世纪隐秘而强大的 .Net程序员 怎能脱离宇宙 ...

  9. github图片

    github:https://github.com/BigShow1949/BigShow1949

  10. 如何提高redmine的访问速度

    刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...