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="地址" /> 地址: ...
随机推荐
- canvas判断边距，反弹和拖拽的综合实例
效果如图所示,可以实现精准拖拉和触界反弹 var canvas = document.getElementById("canvas"); var cxt = canvas.getC ...
- java定时器
package com.lid; import java.util.Calendar; import java.util.Date; import java. ...
- [转]session 持久化问题(重启服务器session 仍然存在)
转:http://xiaolongfeixiang.iteye.com/blog/560800 关于在线人数统计,大都使用SessionListener监听器实现. SessionListener 触 ...
- 【BZOJ 3049】【USACO2013 Jan】Island Travels BFS+状压DP
这是今天下午的互测题,只得了60多分 分析一下错因: $dis[i][j]$只记录了相邻的两个岛屿之间的距离,我一开始以为可以,后来$charge$提醒我有可能会出现来回走的情况,而状压转移就一次,无 ...
- shell截取字符串的方法
参考文献: linux中shell截取字符串方法总结 [Linux]如何在Shell脚本中计算字符串长度? 截取字符串的方法一共有八种,主要为以下方法 shell中截取字符串的方法有很多中, ${ex ...
- 【CodeForces 698A】Vacations
f[i][0..2]表示第i天休息|运动|比赛最少的休息天数. #include <cstdio> #include <cstring> #include <algori ...
- 利用pre平台实现iOS应用程序自动更新
// // AppDelegate.m // PreAutoUpdateDemo // // Created by mac on 15/12/18. // Copyright © 2015年 mac. ...
- MWeb
专业的 Markdown 写作支持 极简 UI.Dark Mode.漂亮的 Markdown 语法高亮.列表缩进优化,提供 5 种主题选择. 除了支持基本的 Markdown 语法外,还支持大量 Ma ...
- Hive 一些便捷小查询
show create table 表名; -- 可以查看表的DDL语句 describe 表名; -- 查看表的字段信息 explain dependency select count(1) fro ...
- Leetcode 280. Wiggle Sort
Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...