javascript 也来玩玩图片预加载 时间:2020-05-12 人气:0 作者：编程浪子 最近玩图片预加载的人好像特别多，我也来一个，个人比较懒，只在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>图片加载中...</div> <div></div> <div></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 onerror="javascript:this.src='/skin1/img/error.jpg';" src="'+arr[i]+'" /> '; } document.getElementById("box").innerHTML=str; } t.LoadImages('http://www.baidu.com/img/logo-yy.gif,http://bbs.51js.com/imageshttps://img.qb5200.com/download-x/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需刷新才能执行] 加载全部内容