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仿php的print_r函数输出json数据
Sep 13 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
输入密码检测大写是否锁定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中如何调用用户自定义函数
2013/08/06 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Python 文件操作实现代码
2009/10/07 Python
为python设置socket代理的方法
2015/01/14 Python
Python中的is和id用法分析
2015/01/26 Python
python中sleep函数用法实例分析
2015/04/29 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python设置环境变量的原因和方法
2019/06/24 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server