豪特汽车网

全部频道

您的当前位置：首页 javascript也来玩玩图片预加载_javascript技巧

javascript也来玩玩图片预加载_javascript技巧

来源：豪特汽车网

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

<html> 
<head> 
<title>IE图片预加载类</title> 
 
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> 
图片加载中...

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
'; 
 } 
 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需刷新才能执行]

显示全文