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


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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
谈谈JS中的!!
Dec 07 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
JavaScript实现下拉列表
Jan 20 Javascript
JavaScript函数柯里化
Nov 07 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 SEO优化之URL优化方法
2011/04/21 PHP
浅谈php扩展imagick
2014/06/02 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
php集成开发环境详解
2019/09/24 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
python 实现多维数组转向量
2019/11/30 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
教师个人自我鉴定
2014/02/08 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
平安建设汇报材料
2014/12/29 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
在Python 中将类对象序列化为JSON
2022/04/06 Python