一、方法

加载完成再显示：借助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. eclipse的插件安装

    如何安装:http://my.oschina.net/linjunlong/blog/126961 插件安装方法:eclipse和myeclipse版本不一样,略有区别 在线安装: 第一种:知道在线安 ...

  2. 大规模数据 从SQL SERVER导入到ORACLE方法

    来源于:http://blog.csdn.net/iitkd/article/details/40394789 来源:一个7G的SQL SERVER .bak文件要导入到Oracle中,经过实验,完成 ...

  3. ubuntu完全卸载nginx

    删除nginx连带配置文件 sudo apt-get purge nginx # Removes everything. 卸载不再需要的nginx依赖程序 sudo apt-get autoremov ...

  4. 【CodeVS 2083】Cryptcowgraphy 解密牛语

    http://codevs.cn/problem/2083/ 奶牛搜索题.我加了如下剪枝: 1.用字符串hash判重.注意判重时也要对字符串长度判重,否则会出现两个字符串长度不同但hash值相同的情况 ...

  5. 折腾笔记之wordpress安装出现错误---【wordpress点击文章找不到网页的解决办法】

    本来写的好好的在后台,然后发表在前台,能够看见在网站首页,但是一点击进去,就提示找不到链接了.郁闷,经过查找资料.终于解决了 1,.htaccess要开放写权限,这样在自定义wp的永久链接时,wp会自 ...

  6. 02python算法-递推

    递推 1什么是递推?:根据已有节点的值,以及规律推出之后节点的值 2为什么要用递推:简单的解决有规矩事件 3怎么用?: 我们举个经典的例子: 如果1对兔子每月能生1对小兔子,而每对小兔在它出生后的第3 ...

  7. HQL多种查询实现

    1.返回int public int countByUsername(String username) { String hql = "select count(*) from BeanCa ...

  8. Android Studio高级配置

    转载:http://www.jianshu.com/p/4243f3b52644   Android Studio 提供了一个非常方便的功能帮助我们导入或者导出设置.因此我们在安装一个新的Androi ...

  9. NameNode & DataNode

    NameNode类位于org.apache.hadoop.hdfs.server.namenode包下. NameNode serves as both directory namespace man ...

  10. VS2013编译python源码

    系统:win10 手头有个python模块,是用C写的,想编译安装就需要让python调用C编译器.直接编译发现使用的是vc9编译,不支持C99标准(两个槽点:为啥VS2008都还不支持C99?手头这 ...