javascript 也来玩玩图片预加载- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 也来玩玩图片预加载

Javascript: Javascript-Mozilla和IE中的一个函数直接量的问题分析; TopList标签和JavaScript结合两例; javascript-TreeView父子联动效果保持节点状态一致; 不错的JS中变量相关的细节分析; 解决使用attachEvent函数时，this指向被绑定的元素的问题的方法; 根据地区不同显示时间的javascript代码; javascript下查找父节点的简单方法; 分享别人写的一个小型js框架; 封装好的省市地区联动控件附下载; 权威JavaScript 中的内存泄露模式; JavaScript 编程引入命名空间的方法与代码; IE/FireFox具备兼容性的拖动代码; 分析 JavaScript 中令人困惑的变量赋值; 推荐一个小巧的JS日历; 让回调函数 showResponse 也带上参数的代码; 增强的 JavaScript 的 trim 函数的代码; 高亮闪烁某个元素的js脚本; 用JavaScript 处理 URL 的两个函数代码; JavaScript 模仿vbs中的 DateAdd() 函数的代码; 用js实现随机返回数组的一个元素

No. « ‹ 77 78 79 80 › »

技术文章搜索

关键字

Javascript 中的 javascript 也来玩玩图片预加载

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 155 ::

收藏到网摘: n/a

实现163邮箱的图标功能又一个小巧的图片预加载类

作者：编程浪子
最近玩图片预加载的人好像特别多，我也来一个，个人比较懒，只在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 全选提示:你可先修改部分代码,再按运行]

实现163邮箱的图标功能又一个小巧的图片预加载类

Javascript 中的 javascript 也来玩玩图片预加载

评论 (0) All