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="地址" /> 地址: ...
随机推荐
- Ubuntu 14.04 安装 JDK 8，ubuntu14.04
第一步,下载Linux版JDK 可以通过访问Oracle官网下载,或者直接通过命令行下载. lxh@ubuntu:~$ wget -c http://download.oracle.com/otn-p ...
- SpringMVC学习系列（8） 之 国际化
一.基于浏览器请求的国际化实现: 1)在 spring的配置文件中添加 <bean id="messageSource" class="org.springfram ...
- mysql-linux命令登录，退出
linux中登录 # mysql -uroot -p 输入密码(为空就直接回车) 显示数据库 shwo databases 退出 1.按ctrl+d 2.exit 3.quit\ 4.sudo shu ...
- Android中图像变换Matrix的原理、代码验证和应用(二)
第二部分 代码验证 在第一部分中讲到的各种图像变换的验证代码如下,一共列出了10种情况.如果要验证其中的某一种情况,只需将相应的代码反注释即可.试验中用到的图片: 其尺寸为162 x 251. 每种变 ...
- 【转】Private Libraries、Referenced Libraries、Dependency Libraries的区别
一.v4.v7.v13的作用和用法 1.Android Support V4, V7, V13是什么? 本质上就是三个java library. 2.为什么要有support库? 是为了解决软件的 ...
- 和ef一起使用的一些知识点。
ObjectContext.ExecuteFunction 方法 (String, ObjectParameter[]) .NET Framework 4.6 and 4.5 执行在数据源中定义 ...
- matplotlib 和 pandas 两个包的安装
matplotlib是强大的python 绘图包.pandas 是强大的python分析工具包.numpy是强大的python统计包. 都超级好用,而且最近开始动手实践机器学习算法了.特此备注一下安装 ...
- 65.Android 三大图片缓存原理、特性对比 (转)
这是 Trinea 在 MDCC 上分享的内容(略微改动),也是源码解析第一期发布时介绍的源码解析后续会慢慢做的事. 从总体设计和原理上对几个图片缓存进行对比,没用到他们的朋友也可以了解他们在某些特性 ...
- SQL Server数据同步的研究（单向/双向）
思路: 1.做中间件(简单:定时采集:复杂:分布式,订阅中心的形式,如微信的中间件:https://github.com/tencent-wechat/phxsql) 2.采用触发器的形式,有数据触发 ...
- SQLServer自动备份和自动删除过期文件
以下为转载的文章: 点击下一步: 自定义名称和说明,点击更改: 点击确定,下一步 1.备份: 选择备份,下一步,再下一步,选择需要备份的数据库: 选择备份文件存放的路径: 点击下一步,选择系统产生的报 ...