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 相关文章推荐
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
输入密码检测大写是否锁定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
截获网站title标签之家内容的例子
2006/10/09 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
layui的select联动实现代码
2019/09/28 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
毕业生求职的求职信
2013/12/05 职场文书
总会计师岗位职责
2014/02/19 职场文书
离职保密承诺书
2014/05/28 职场文书
买房协议书范本
2014/10/23 职场文书
乐山大佛导游词
2015/02/02 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
css3 文字断裂效果
2022/04/22 HTML / CSS