JS图片预加载 JS实现图片预加载应用


Posted in Javascript onDecember 03, 2012
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>js 实现图片预加载 加载完后执行动作</title> 
</head> 
<style type="text/css"> 
<!-- 
*html{ 
margin:0; 
padding:0; 
border:0; 
} 
body{border:1px solid #f3f3f3; background:#fefefe} 
div#loading{ 
width:950px; 
height:265px; 
line-height:265px; 
overflow:hidden; 
position:relative; 
text-align:center; 
} 
div#loading p{ 
position:static; 
+position:absolute; 
top:50%; 
vertical-align:middle; 
} 
div#loading p img{ 
position:static; 
+position:relative; 
top:-50%;left:-50%; 
vertical-align:middle 
} 
--> 
</style> 
<div id="loading"> 
<p><img src="http://www.baidu.com/img/baidu_logo.gif" /></p> 
</div> 
<script> 
var i=0; 
var c=3; 
var imgarr=new Array 
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif"; 
imgarr[1]="http://img.baidu.com/img/logo-img.gif"; 
imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif"; 
var Browser=new Object(); 
Browser.userAgent=window.navigator.userAgent.toLowerCase(); 
Browser.ie=/msie/.test(Browser.userAgent); 
Browser.Moz=/gecko/.test(Browser.userAgent); 
function SImage(url,callback) 
{ 
var img = new Image(); 
if(Browser.ie){ 
img.onreadystatechange =function(){ 
if(img.readyState=="complete"||img.readyState=="loaded"){ 
ii=i+1; 
callback(i); 
} 
} 
}else if(Browser.Moz){ 
img.onload=function(){ 
if(img.complete==true){ 
ii=i+1; 
callback(i); 
} 
} 
} 
img.src=url; } 
function icall(v) 
{ 
if(v<c){ 
SImage(""+imgarr[v]+"",icall); 
} 
else if(v>=c){ 
i=0; 
//location.replace('banner.html');//这里写自己的动作吧, 
} 
}
Javascript 相关文章推荐
javascript 浏览器检测代码精简版
Mar 04 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
输入密码检测大写是否锁定js实现代码
Dec 03 #Javascript
js操作textarea 常用方法总结
Dec 03 #Javascript
javascript object array方法使用详解
Dec 03 #Javascript
让AJAX不依赖后端接口实现方案
Dec 03 #Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
You might like
php str_pad 函数使用详解
2009/01/13 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
PHP实现文件上传与下载
2020/08/28 PHP
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
中班上学期幼儿评语
2014/04/30 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
竞聘自述材料
2014/08/25 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
用Python提取PDF表格的方法
2021/04/11 Python