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 相关文章推荐
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
JS交换变量的方法
Jan 21 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JSONP跨域请求
Mar 02 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 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生成PDF方法详解
2015/01/23 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
php时间戳转换代码详解
2019/08/04 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
基于python 凸包问题的解决
2020/04/16 Python
优质的学校老师推荐信
2013/10/28 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
法学函授自我鉴定
2014/02/06 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
营销与策划专业求职信
2014/06/20 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
教师读书笔记
2015/06/29 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
python三子棋游戏
2022/05/04 Python