CSS 图片加载完成再淡入显示
一、方法
加载完成再显示：借助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 图片加载完成再淡入显示的更多相关文章
- JavaScript-onerror事件:图片加载失败后不显示
HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...
- vue判断图片为空或者图片加载不成功时显示默认图片
纯css解决方案: <img src="broken.png" alt=""> img { position: relative; } img:af ...
- [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究
A. 图片的加载: [UIImage imageNamed:@"home"]; 加载png图片 一.非retina屏幕 1.3.5 inch(320 x 480) * ...
- Google推荐——Glide使用详解(图片加载框架)
零.前言 本文所使用的Glide版本为3.7.0 一.简介 Glide,一个被google所推荐的图片加载库,作者是bumptech.这个库被广泛运用在google的开源项目中,包括2014年的goo ...
- android Glide图片加载框架的初探
一.Glide图片加载框架的简介 谷歌2014年开发者论坛会上介绍的图片加载框架,它让我们在处理不管是网路下载的图片还是本地的图片,减轻了很多工作量, 二.开发步骤: 1.添加链接库 compile ...
- Android图片加载神器之Fresco，基于各种使用场景的讲解
Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...
- Android图片加载神器之Fresco， 基于各种使用场景的讲解
Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...
- 图片加载框架之ImageLoader
Android开发中,多少会接触到异步加载图片,或者加载大量图片的问题,而加载图片我们常常会遇到许多的问题,比如说图片的错乱,OOM等问题,对于这些问题解决起来会比较吃力,比较著名的就是Univers ...
- HTML之学习笔记（五）图片加载
Html图片的处理一般采用<img>标签 语法: 例如<img src="地址" /> 地址: ...
随机推荐
- 使用D3绘制图表（3）--添加坐标轴和文本标签
上一篇是曲线的绘制,这样仅仅只是有一条线,完全先是不出数据想要表现的内容,于是我们要添加坐标系,添加坐标系和画线类似. 1.还是没有变化的html页面 <!DOCTYPE html> &l ...
- 一个Activity掌握Design新控件 （转）
原文地址:http://blog.csdn.net/lavor_zl/article/details/51295364 谷歌在推出Android5.0的同时推出了全新的设计Material Desig ...
- The resource identified by this request is only capable of generating responses with characteristics
[转]今天在调试springMVC的时候,在将一个对象返回为json串的时候,浏览器中出现异常: The resource identified by this request is only cap ...
- mysql-数据类型与java数据类型转化工具类
mysql和java对照表 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 VARCHAR L+N VARCHAR java.lang.Stri ...
- C#的输入输出，类型，运算符，语句的练习
//请输入您的姓名.年龄.工作单位, //拼接成一句完整的话 //我叫***,今年**岁了,在****工作. Console.Write("请输入你的姓名:"); string n ...
- pch文件的使用
pch文件的应用场景:1.用来定义一些全局的宏2.用来导入一些全局都能访问的头文件(如果只需要让.m或者.mm文件访问到,不需要让.c文件访问到,那么需要把头文件写到#ifdef _OBJC_ #en ...
- ffmpeg 转成MP3采样率8000
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 浅析VO、DTO、DO、PO的概念、区别和用处
上一篇文章作为一个引子,说明了领域驱动设计的优势,从本篇文章开始,笔者将会结合自己的实际经验,谈及领域驱动设计的应用.本篇文章主要讨论一下我们经常会用到的一些对象:VO.DTO.DO和PO. 由于不同 ...
- VS2008 查找 替换对话框无法打开的解决方法
1.今天碰到了这个窗口打不开的问题.醉了 解决方案: 窗口->重置窗口布局.
- Linux_LVM_磁盘扩容
场景描述: 安装操作系统的时候,做了LVM,应用软件基本装在了“/”目录下,服务器运行一段时间后,该目录下的存储空间使用紧张,现利用LVM对其进行磁盘空间扩容. 注:安装系统的时候需要做逻辑卷管理,保 ...