javascript 也来玩玩图片预加载

更新时间：2007年05月05日 00:00:00 作者：

作者：编程浪子
最近玩图片预加载的人好像特别多，我也来一个，个人比较懒，只在IE上调试，大家就当无聊聊玩玩吧

<html> <head> <title>IE图片预加载类</title> <script language="javascript"> function LoadImageClass() {     var me = this;     var a = [];    //图片数组     this.Idx = 0;    //已经被加载的图片个数     this.Num = 0;    //图片总数     //下载图片     this.LoadImages = function(s)     {         a = s.split(",");         this.Num = a.length;         DownImg();     }     function DownImg()     {         var i=new Image();         var f = true;         i.onload= function()         {             if (f)             {                 f = false                 me.Idx++;                 if (me.LoadIng) me.LoadIng();                 if (me.Idx<me.Num) DownImg();                 else if(me.CallBack) me.CallBack(a);             }         }         i.src = a[me.Idx];     } } </script> </head> <body> <div id="counter" style="position:absolute; z-index:98; left:expression(document.body.clientWidth/2-60); top:expression(document.body.clientHeight/2-10); width:120px; height:20px; background:#000000; color:#ffffff;">图片加载中...</div> <div id="divPageMask" style="position:absolute; z-index:99; left:0px; top:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight); background:black; filter:alpha(opacity=50);"></div> <div id="box"></div> <script language="javascript">     var o = document.getElementById("counter");     var t=new LoadImageClass();     t.LoadIng = function() { o.innerHTML="加载进度："+Math.floor(t.Idx/t.Num*100)+"%" };     t.CallBack = function(arr)     {         window.setTimeout(function(){o.style.display='none';alert('图片加载完毕！')},1000);         document.getElementById('divPageMask').style.display='none';         var str="";         for(var i=0;i<arr.length;i++)         {             str+='<img src="'+arr[i]+'" />';         }         document.getElementById("box").innerHTML=str;     }     t.LoadImages('http://www.baidu.com/img/logo-yy.gif,http://bbs.51js.com/images/default/logo.gif,http://www.programbbs.com/bbs/uploadFace/46_2006910934216927.gif,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'); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript forEach()遍历函数使用及介绍
这篇文章主要介绍了JavaScript forEach()遍历函数使用及介绍,本文讲解了使用forEach遍历数组的用法以及提前终止循环的一个方法技巧,需要的朋友可以参考下
2015-07-07
前端实现监控SDK的实战指南
本文讨论了前端监控和数据统计的设计思路,包括错误监控、用户行为日志、PV/UV统计等方面,介绍了数据采集、日志上报、日志查询的流程,以及监控错误的类型和用户埋点统计的手段,同时提到了PV和UV的统计方法,需要的朋友可以参考下
2024-10-10
three.js着色器材质的内置变量示例详解
这篇文章主要给大家介绍了关于three.js着色器材质内置变量的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2020-08-08
ES6使用 const 声明过程详解
这篇文章主要介绍了ES6使用 const 声明,本文给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
JavaScript 中级笔记第五章面向对象的基础
对象是JavaScript的基础。从最基本的层次上说，对象是一系列属性的集合。
2009-09-09
js表单处理中单选、多选、选择框值的获取及表单的序列化
这篇文章主要介绍了js表单处理中单选、多选、选择框值的获取及表单的序列化的相关资料,需要的朋友可以参考下
2016-03-03
Js中使用hasOwnProperty方法检索ajax响应对象的例子
这篇文章主要介绍了Js中使用hasOwnProperty方法检索ajax响应对象的例子,本文介绍的技巧就是hasOwnProperty方法在ajax请求中的使用,需要的朋友可以参考下
2014-12-12
JS文字球状放大效果代码分享
这篇文章主要展示了JS文字球状放大效果，和放大镜放大文字一样，很神奇的代码，感兴趣的小伙伴们可以参考一下
2015-08-08
js实现随屏幕滚动的带缓冲效果的右下角广告代码
这篇文章主要介绍了js实现随屏幕滚动的带缓冲效果的右下角广告代码,涉及javascript基于数学运算及定时函数动态操作页面元素的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
javascript代码实现简易计算器
这篇文章主要为大家详细介绍了javascript代码实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01

javascript 也来玩玩图片预加载

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具