javascript 也來玩玩圖片預加載

2019-11-21 02:06:33

字體：大中小

來源：轉載

供稿：網友

作者：編程浪子
最近玩圖片預加載的人好像特別多，我也來一個，個人比較懶，只在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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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]+'"%20/>';%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20document.getElementById("box").innerHTML=str;%20%20%20%20%20}%20%20%20%20%20t.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需刷新才能執行]

上一篇：一個不錯的漸隱文字效果第1/2頁

下一篇：清華大學出版的事半功倍系列 javascript全部源代碼