JS图片预加载 JS实现图片预加载应用
更新时间：2012年12月03日 16:06:59 作者：
由于图片加载慢，导致用户体验特别差，本文将介绍一种图片预加载技术，需要了解的朋友可以参考下
复制代码 代码如下:
<!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');//这里写自己的动作吧，
}
}
相关文章
ES6不仅在语法上有很大的改进,在代码的组织结构上也有重大升级,下面这篇文章主要给大家介绍了关于ES6的一些实用高级技巧的相关资料,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了js封装成插件的步骤方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令（directive），当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。本文主要给大家介绍Angular Js文件上传之form-data，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了详解SPA中前端路由基本原理与实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了js简单获取表单中单选按钮值的方法,涉及javascript针对form表单元素的遍历与查找相关操作技巧,需要的朋友可以参考下2016-08-08
昨天闲着没事，又因为工作需要，写了一个脚本，用来做ftp。当然不是直接做ftp，而是产生一个ftp的脚本，供ftp命令使用。2013-07-07
这篇文章主要介绍了js单线程的本质 Event Loop解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
JavaScript提供了一些内置的日期和时间函数，有助于从日期（出生日期）开始计算年龄。本文主要介绍了使用这些JavaScript方法，制作一个简单的年龄计算器，快来跟随小编一起学习学习吧2021-12-12
这篇文章主要介绍了JavaScript获取当前网页标题（title）的方法,涉及javascript中document.title方法的使用,需要的朋友可以参考下2015-04-04
今天小编就为大家分享一篇Layui tree 下拉菜单树的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论