OK, let's take a different approach. Get rid of what we had before (what we just added) and get rid of any and all other onload events for loadimages (if any still remain from before). Use this version of the script:
Code:
if(document.getElementById)
;(function(){
// Progressbar - Version 3.0
// Author: Brian Gosselin of http://scriptasylum.com
// Featured on Dynamic Drive (http://www.dynamicdrive.com)
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL IMAGES ARE LOADED, THE "progressbar_body_container" (if used) DIVISION'S DISPLAY STYLE IS SET TO BLOCK
var imagenames=new Array( '1.gif' , '2.gif' , '3.gif' , '4.gif' , '5.gif' , '6.gif');
var yposition=250; // POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=35; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER
var usecontainer=true; // ARE YOU USING THE "progressbar_body_container" TO OBSCURE YOUR MARKUP WHILE IMAGES LOAD? (true/false)
//DO NOT EDIT BEYOND THIS POINT
var blocksize = barwidth/imagenames.length;
barheight = Math.max(barheight, 25);
var loaded = 0, perouter, perdone, images=[];
if(usecontainer)
document.write('<style type="text/css">#progressbar_body_container {display:none;}<\/style>');
var txt='<div id="perouter" style="position:absolute; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+='<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+='</div>';
txt+='</td></tr></table>';
txt+='</div>';
document.write(txt);
var loadimages = function(){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
clipdiv(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for (var n = imagenames.length - 1; n > -1; --n){
images[n] = new Image();
images[n].onload = dispbars;
images[n].src = imagenames[n];
}
}
var setouterpos = function(){
var ww = window.innerWidth? window.innerWidth : document.body.clientWidth;
var x = (ww-barwidth)/2;
perouter.style.left = x + 'px';
perouter.style.top = yposition + 'px';
}
var dispbars = function(){
clipdiv(perdone, 0, blocksize * (++loaded), barheight, 0);
if(loaded >= imagenames.length)
setTimeout(hideperouter, 800);
}
var hideperouter = function(){
perouter.style.display='none';
if(usecontainer)
document.getElementById('progressbar_body_container')?
document.getElementById('progressbar_body_container').style.display = 'block' :
setTimeout(hideperouter, 100);
}
var clipdiv = function(el, ct, cr, cb, cl){
el.style.clip='rect(' + [ct, cr, cb, cl].join('px ') + ')';
}
loadimages();
})();
Finally, in the body of your page add the progressbar_body_container division, putting all of the rest of your content in it:
HTML Code:
<body>
<div id="progressbar_body_container">
your entire page's content goes here
</div>
</body>
Problem with Preloader (with Progress Bar) II
Reply With Quote
Bookmarks