一、方法

加载完成再显示：借助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. ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法

    来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...

  2. tomcat 的安全规范

    下面来说一下,日常工作当中我们需要注意的一些tomcat的安全规范: 一:telnet管理端口的保护 类别 配置内容及其说明 标准配置 备注 Telnet 管理端口的保护 (强制) (1)配置文件中的 ...

  3. 求割点 poj 1523

    给你一些双向边 求有多少个割点 并输出去掉点这个点 去掉后有几个联通分量 Tarjan #include<stdio.h> #include<algorithm> #inclu ...

  4. Hive 中的分号问题

    1.  hive表中有一列值,是以 分号 ; 为分隔符连接存储的 1470047164;1470047628;1470049068;1470048978;1470048922;1470047658;1 ...

  5. Redis哈希-hash

    Redis的hash类型数据存储极为重要 hset K V  赋值一个hash 其中V为 (key, value) 127.0.0.1:6379> hset user id 1(integer) ...

  6. js-JavaScript高级程序设计学习笔记16

    第20章 JSON JOSN,JavaScript对象表示法,是JS的一个严格的子集,但是它是一种数据格式,虽然与JS具有相同的语法形式,但是不从属于JS. 1.语法 ①可表示简单值--字符串.数值. ...

  7. 【poj1091】 跳蚤

    http://poj.org/problem?id=1091 (题目链接) 题意 给出一张卡片,上面有n+1个数,其中最大的数为m,每次可以向前或者向后走卡片上面的步数.问有多少种方案选出n个数组成一 ...

  8. Hash_P1026毒药？解药？

    #include <iostream> #include <cstdio> #include <algorithm> #include <cstring> ...

  9. PowerShell控制台快捷键

    按键 功能 ← 光标向左移动一个字符 Ctrl + ← 光标向左移动一个单词 → 光标向右移动一个字符 Ctrl + → 光标向右移动一个单词 Home键 光标移动到行首 End键 光标移动到行尾 D ...

  10. UVa1636 Headshot

    数据结构学得心累,做点小题换心情 原题是PDF格式查看的,贴过来好麻烦,果断放弃 已知前一次尝试结果是0,则可以得知: 下一次若仍是0,则遇到了一个00串 下一次若是1,则遇到了一个01串 SHOOT ...