<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9.0.js"></script> <style type="text/css"> body { background:#000; } #loader { margin: 0 auto; width: 300px; text-align: center; font-size: 25px; color: #efefef; margin-top: 300px; } #bar { border:1px solid #efefef; padding: 1px; margin-top: 10px; } #bar span { display: block; height: 2px; background: #efefef; } .main{ text-align: center; font-size: 25px; } </style> </head> <body style="overflow:auto"> <div id="loader"> Loading <span id="load-text">0%</span> <div id="bar"> <span> </span> </div> </div> <div class="main" style="display: none;"> 加载完显示的内容 </div> </body> </html> <script type="text/javascript"> var allImgSrcArr = new Array(); addImgSrc("./img/skill/1_48.png"); addImgSrc("./img/skill/1_50.png"); addImgSrc("./img/skill/1_60.png"); addImgSrc("./img/skill/1_120.png"); addImgSrc("./img/skill/1_250.png"); addImgSrc("./img/skill/1_500.png"); addImgSrc("./img/skill/1_1000.png"); addImgSrc("./img/skill/1_2000.png"); //创建图片路径数组 function addImgSrc(src){ allImgSrcArr[allImgSrcArr.length] = src; } //=============================================================方法一 Array.prototype.remove = function(element) {//element为图片路径 for (var i = 0; i < this.length; i++) if (this[i] == element) this.splice(i,1);//this为路径数组 }; function preload(images, progress) { var total = images.length; $(images).each(function(){ var src = this; $('<img/>').attr('src', src).load(function() { images.remove(src); progress(total, total - images.length); }); }); } preload(allImgSrcArr, function(total, loaded){ if (Math.ceil(100 * loaded / total) >= 100) { $('#load-text').html(100 + '%'); $('#bar span').css('width', 100 + '%'); $('#loader').fadeOut('slow', function() { $("body").attr("style","background: #efefef;"); $('.main').fadeIn('slow'); }); } else { var percent = Math.ceil(100 * loaded / total); $('#load-text').html(percent + '%'); $('#bar span').css('width', percent + '%'); } }); //=============================================================方法二 //对图片的加载不用JQuery，但图片数量大时容易内存溢出 /* function LoadImageClass() { var loadImageClass = this; this.Idx = 0; //已经被加载的图片个数 this.Num = 0; //图片总数 //下载图片 this.LoadImages = function() { this.Num = allImgSrcArr.length; DownImg(); } function DownImg() { var i=new Image(); var f = true; i.onload= function() { if (f) { f = false loadImageClass.Idx++; if (loadImageClass.LoadIng) loadImageClass.LoadIng(); if (loadImageClass.Idx<loadImageClass.Num) DownImg(); else if(loadImageClass.CallBack) loadImageClass.CallBack(allImgSrcArr); } } i.src = allImgSrcArr[loadImageClass.Idx]; } } var t=new LoadImageClass(); t.LoadIng = function() { var percent = Math.ceil(100 * t.Idx/t.Num); $('#load-text').html(percent + '%'); $('#bar span').css('width', percent + '%'); }; t.CallBack = function(arr) { $('#load-text').html(100 + '%'); $('#bar span').css('width', 100 + '%'); $('#loader').fadeOut('slow', function() { $("body").attr("style","background: #efefef;"); $('.main').fadeIn('slow'); }); } t.LoadImages(); */ </script>