又一个小巧的图片预加载类


Posted in Javascript onMay 05, 2007
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var IE=navigator.appName=="Microsoft Internet Explorer"; 
var Opera=navigator.appName.toLowerCase()=="opera"; 
var FF=!IE && !Opera; 
function LoadImage(arrSrc,callBack) 
{ 
    this.Length=arrSrc.length; 
    this.LoadedLen=0;    //已经被加载的图片个数 
    var self=this; 
    if(self.Length<1) 
    { 
        callBack(arrSrc); 
        return; 
    }     //经测试,OPERA与别的浏览器加载方式不同,所以特别独立开来... 
    if(Opera) 
    { 
        for(var i=0;i<self.Length;i++) 
        { 
            var tmpImg=new Image(); 
            tmpImg.src=arrSrc[i]; 
            tmpImg.onload=function() 
            { 
                self.LoadedLen++; 
                if(self.LoadedLen==self.Length && callBack)    callBack(arrSrc); 
            } 
        } 
        return; 
    } 
    this.Load=function() 
    { 
        self.LoadedLen++; 
        document.getElementById("counter").innerHTML=self.LoadedLen; 
        if(self.LoadedLen<self.Length)    self.DownImg(); 
        else if(callBack)    callBack(arrSrc); 
    } 
    this.DownImg=function() 
    { 
        var tmpImg=new Image(); 
        tmpImg.src=arrSrc[self.LoadedLen]; 
        if(IE) 
        { 
            if(tmpImg.readyState=="complete")    self.Load(); 
            else    tmpImg.onreadystatechange=function() 
            { 
                if(this.readyState=="complete")    self.Load(); 
            } 
        } 
        else    tmpImg.onload=self.Load; 
    } 
    this.DownImg(); 
} 
//--> 
</SCRIPT> 
</HEAD> 
<BODY> 
<div id="counter"></div> 
 <SCRIPT LANGUAGE="JavaScript"> 
 <!-- 
    var arr=['http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg','http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg','http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg']; 
    var t=new LoadImage(arr,function(arr) 
    { 
        var str=""; 
        for(var i=0;i<arr.length;i++) 
        { 
            str+="<img src='"+arr[i]+"' /><br>"; 
        } 
        document.body.innerHTML+=str; 
    }); 
 //--> 
 </SCRIPT> 
</BODY> 
</HTML>
Javascript 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
vue中的scope使用详解
Oct 29 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 #Javascript
用js实现的抽象CSS圆角效果!!
May 03 #Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 #Javascript
Packer 3.0 JS压缩及混淆工具 下载
May 03 #Javascript
javascript+dom树型菜单类,希望朋友们一起进步
May 03 #Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 #Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 #Javascript
You might like
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
高中军训感言800字
2014/03/05 职场文书
授权委托书样本
2014/04/03 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
文化大革命观后感
2015/06/17 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
python中的被动信息搜集
2021/04/29 Python
MySQL里面的子查询的基本使用
2021/08/02 MySQL