一、方法

加载完成再显示：借助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. php上传sae路径问题

    我们写php时,会有 define('POOT_PATH', dirname(__FILE__)); 但是sea中没有用,所以我们要用 define("ROOT_PATH", $_ ...

  2. [转]Spring3核心技术之事务管理机制

    原文地址:http://chouyi.iteye.com/blog/1675199 Spring对事务的解决办法其实分为2种:编程式实现事务,AOP配置声明式解决方案. http://jinnians ...

  3. SVN_限制注释长度

      一.说明 svn服务器上每个项目都会有单独一个文件夹,文件夹下有一个hooks文件夹,可以在pre-commit添加内容限制注释输入 项目t1的下的hooks文件夹   二.操作步骤 注意:修改的 ...

  4. 使用jmeter进行性能测试-Jmeter教程及技巧汇总 (转)

    http://www.jmeter.cf/loadtesting-jmeter.html 为什么使用jmeter, 它免费开源, 不断发展, 功能逐渐强大. 可以做功能,负载, 性能测试.一套脚本可以 ...

  5. dede使用方法----如何自定义字段

    我们在用dede做东西的时候,有时候需要添加一些dede里面没有的字段,有dede后台里面可以添加相关的自段,下面我就以如何给产品添加一个价格的字段来讲述一下如何给dede添加字段,并且调用它. 1. ...

  6. perl sub

    #/usr/bin/perl -w use strict; my $usage = "\n\nusage: $0 <length>\n\n"; my $length = ...

  7. C++ 序列式容器之vector

     什么是容器 容器,顾名思义,是用来容放东西的场所.C++容器容放某种数据结构,以利于对数据的搜寻或排序或其他特殊目的.众所周知,常用的数据结构不外乎:数组array,  链表list,  树tree ...

  8. wpf listview 换行

    <ListView  Name="listView1" VerticalAlignment="Top" Height="600" Ma ...

  9. cmd 利用IE打开网页

    "C:\Program Files\Internet Explorer\iexplore.exe" "http://dmsite.chinacloudsites.cn/r ...

  10. Android成长日记-ProgressBar的设计

    ProgressBar的关键属性 Android:max=”100” - ---最大显示进度 Android:progress=”50”----第一显示进度 Android:secondaryProg ...