|
|
Hello there !
I just found a great image preload with progress bar script. But i need to modify it so it redirects me to another place after the images is preloaded. The script is listed below. Is there any way to redirect this page, I´ve tried experimenting with location.replace but I cant get it to work. Could some great coder please help me with this issue ?
Best reagrds
/Karl
<script language="JavaScript">
/*
Progress Bar
Copyright Eddie Traversa (nirvana.media3.net)
To add more shock to your site, visit www.DHTML Shock.com
*/
//PUT THE NAMES OF ALL YOUR IMAGES IN THE ARRAY BELOW.
var imagenames=new Array('/forum/images/mainpicture1.jpg', '/forum/images/mainpicture1.jpg','/forum/images/mainpicture1.jpg', '/forum/images/mainpicture3.jpg','/forum/images/mainpicture4.jpg','/forum/images/mainpicture5.jpg', '/forum/images/mainpicture6.jpg', '/forum/images/mainpicture7.jpg','/forum/images/mainpicture9.jpg','/forum/images/mainpicture10.jpg'<img src=../images/wink.gif>;
var yposition=120; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var isNS=(document.layers);
var _all = (isNS) ? 'outer.document.' : 'all.' ;
var _style = (isNS) ? '' : '.style';
var _visible = (isNS) ? 'show' : 'visible' ;
var _hidden = (isNS) ? 'hide' : 'hidden' ;
var blocksize=Math.ceil(250/imagenames.length);
barwidth=imagenames.length*blocksize;
var images=new Array();
var loaded=0, txt='';
function resize(){
if(isNS){
document.outer.moveTo( window.innerWidth/2-barwidth/2 , yposition );
}else{
document.all.outer.style.pixelLeft=document.body.clientWidth/2-barwidth/2;
document.all.outer.style.pixelTop=yposition;
}}
txt+=(isNS)? '<layer name="outer" height="22" bgcolor="lightgrey" top="'+yposition+'" left="'+(window.innerWidth/2-barwidth/2)+'" width="'+barwidth+'" visibility="visible">' : '<div id="outer" style="position:absolute; left:'+(document.body.clientWidth/2-barwidth/2)+'; top:'+yposition+'; height:22px; background-color:lightgrey; width:'+barwidth+'px; visibility:visible;">';
txt+=(isNS)? '<layer z-index="2" width="'+barwidth+'" height="22" ><font point-size="12"><center>Images loading...</center></layer>' : '<div style="position:absolute; text-align:center; height:22px; width:'+barwidth+'px; z-index:100; font-size:14px; ">Images loading...</div>';
txt+=(isNS)? '<layer z-index="1" name="prog" height="22" bgcolor="lightseagreen" width="0"></layer>' : '<div id="prog" style="position:absolute; height:22px; background-color:lightseagreen; width:0px"></div>';
txt+=(isNS)? '</layer>' : '</div>';
document.write(txt);
resize();
function dispbars(){
loaded++;
if(isNS){
document.outer.document.prog.clip.width=blocksize*loaded;
}else{
document.all.prog.style.width=blocksize*loaded;
}
if(loaded>=imagenames.length){
setTimeout('(isNS)?document.outer.visibility="hide":document.all.outer.style.visibility="hidden";', 800);
}}
function loadimages(){
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
checkload(n);
}}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+'<img src=../images/wink.gif>', 500);
}
window.onload=loadimages;
window.onresize=resize;
</script>
|
|
|
|
Here you go. Save the following code as a new HTML file, then run it to see how to do the three methods of redirecting using javascript.
<script language=javascript>
function GetOutOfHere(methodType)
{
switch(methodType)
{
case "location":
document.location = "http://www.shinysolutions.com";
break;
case "navigate":
window.navigate("http://www.shinysolutions.com");
break;
case "replace":
document.location.replace("http://www.shinysolutions.com");
break;
}
}
</script>
<h4>Try the different javascript methods below to navigate to another page.</h4>
<p>
Go to www.ShinySolutions.com using the
<a href=JavaScript:GetOutOfHere("location")>document.location</a>
method.
<p>
Go to www.ShinySolutions.com using the
<a href=JavaScript:GetOutOfHere("navigate")>window.navigate()</a>
method.
<p>
Go to www.ShinySolutions.com using the
<a href=JavaScript:GetOutOfHere("replace")>document.location.replace()</a>
method.
<p>
The first two methods achieve the same results.
The third method actually "replaces" the current page with the new page.
This means that the old page is no longer in the navigation path. So with the first two methods,
the user can hit their Back button to return to the original page. With the third method, it's as if
the new page IS the original page.
|
|
|
|
|
|
|
|
|
|
|
|
karl_svensson
Troy Wolf
