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
split()方法将一个字符串对象的每个字符拆出来，并且将每个字符串当成数组的每个元素 reverse()方法用来改变数组，将数组中的元素倒个序排列，第一个数组元素成为最后一个，最后一个变成第一个 join()方法将数组中的所有元素边接成一个字符串
2016-04-04
javascript算法解数独实现方案示例
这篇文章主要为大家介绍了javascript算法解数独实现方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
JS面向对象之多选框实现
这篇文章主要为大家详细介绍了JS面向对象之多选框实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
javascript 定时器工作原理分析
说到 javascript 中的定时器，我们肯定会想到 setTimeout() 和 setInterval() 这两个函数。本文将从事件循环（Event Loop）的角度来分析两者的工作原理和区别
2016-12-12
JavaScript中如何在一个循环中等待示例代码详解
这篇文章主要介绍了在JavaScript中如何在一个循环中等待（附代码示例）,下面是如何使用for..of 循环来迭代一个数组并在循环内等待，需要的朋友可以参考下
2022-08-08
使用js获取当前年月日的方法及格式整理汇总
很多时候我们需要在前台获取当前日期,下面这篇文章主要给大家介绍了关于使用js获取当前年月日的方法及格式整理的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
JavaScript定义全局对象的方法示例
这篇文章主要介绍了JavaScript定义全局对象的方法,结合实例形式分析了javascript全局对象的简单定义流程与实现技巧,需要的朋友可以参考下
2017-01-01
JS 实现Base64编码与解码实例详解
这篇文章主要介绍了JS 实现Base64编码与解码实例详解的相关资料,并附实例代码，帮助大家学习理解此部分知识，需要的朋友可以参考下
2016-11-11
JS模拟实现ECMAScript5新增的数组方法
ECMAScript5 新增了十个数组方法，这些方法只有在ie9及以上浏览器中可以被使用，下面是对于这些方法的模拟实现简单介绍下，需要的朋友参考下
2017-03-03
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
在javascript中，typeof 和 instanceof 是用来判断数据类型比较通用的两个方法，这篇文章的目的是通过对这两个方法介绍来分析其存在的不足并提出优化方案
2016-01-01