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


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脚本
Aug 04 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
vue一步步实现alert功能
Jul 05 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
vue实现数字滚动效果
Jun 29 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
清华大学出版的事半功倍系列 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
php4的session功能评述(三)
2006/10/09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php绘制圆形的方法
2015/01/24 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
详解vue项目打包步骤
2019/03/29 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
护士自我鉴定
2013/10/23 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
新郎结婚感言
2015/07/31 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang