This is a discussion on "Excellent hard to find Javascript..." within the JavaScript Forum section. This forum, and the thread "Excellent hard to find Javascript... are both part of the Program Your Website category.
|
|
|
|
|
![]() |
||
Excellent hard to find Javascript...
|
||
| Notices |
![]() |
|
|
LinkBack | Thread Tools |
|
|||
|
Excellent hard to find Javascript...
I've been looking for one of these all weekend, and couldnt find one, so I decided to combine other javascripts into one and make my own.
Here is a javascript that will preload your images with a progress bar, and then when its done, it will automatically redirect you to the specified page. But wait! it uses cookies so that if you have already preloaded the images, it will immediately redirect. This could also be used with a splash/intro page so that people revisiting dont have to see it more than once. DEMO: http://www.moderncrusaders.vze.com . Go there twice (you will only see the intro page one time!) Heres the code: <font color="red">paste this in the <head> section:</font id="red"> <font color="purple"><script> <!-- // page to go to if cookie exists go_to = "home.html"; // number of days cookie lives for num_days = 15; function ged(noDays){ var today = new Date(); var expr = new Date(today.getTime() + noDays*24*60*60*1000); return expr.toGMTString(); } function readCookie(cookieName){ var start = document.cookie.indexOf(cookieName); if (start == -1){ document.cookie = "seenit=yes; expires=" + ged(num_days); } else { window.location = go_to; } } readCookie("seenit"); // --> </script> <SCRIPT LANGUAGE="JavaScript"> <!-- /************************************************** In this script only edit the line that ends in /****/ Between the parenthesis put all you imgages you want loaded in 'single quotes' followed by a , with no spaces **************************************************/ //--------------Preloads nav frame pics so they roll over faster function preLoad() { var images = new Array('newmain.gif','newroster.gif','newinteract.g if','newtop.gif','newbgblack.gif','newbg.gif','new columnbg.jpg','newcolumn.jpg','newpan.jpg','panel. jpg','newbodybg.gif','newbody.jpg','oil.gif','newb g1.gif','bg.jpg','copy.gif'); /****/ preloadImages(images); } //--------------Defines process for preload function preloadImages(images) { for(loop = 0; loop < images.length; loop++) { var image = new Image(); image.src = images[loop]; } } //--> </SCRIPT></font id="purple"> <font color="red">now paste this in the <body> section:</font id="red"> <font color="purple"><script language="javascript" src="timerbar.js"> </script></font id="purple"> <font color="red">here are the contents of "timerbar.js":</font id="red"> <font color="purple">var loadedcolor='#637B63' ; // PROGRESS BAR COLOR var unloadedcolor='white'; // COLOR OF UNLOADED AREA var bordercolor='#666666'; // COLOR OF THE BORDER var barheight=10; // HEIGHT OF PROGRESS BAR IN PIXELS var barwidth=300; // WIDTH OF THE BAR IN PIXELS var waitTime=20; // NUMBER OF SECONDS FOR PROGRESSBAR // THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%. // IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({}) // BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE. // PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY. // TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE: // window.location="http://redirect_page.html"; // JUST CHANGE THE ACTUAL URL OF COURSE var action=function() { window.location="home.html"; } //************************************************** ***// //********** DO NOT EDIT BEYOND THIS POINT **********// //************************************************** ***// var ns4=(document.layers)?true:false; var ie4=(document.all)?true:false; var blocksize=(barwidth-2)/waitTime/10; var loaded=0; var PBouter; var PBdone; var PBbckgnd; var Pid=0; var txt=''; if(ns4){ txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>'; txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">'; txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>'; txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>'; txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>'; txt+='</ilayer>'; txt+='</td></tr></table>'; }else{ txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">'; txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>'; txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>'; txt+='</div>'; } document.write(txt); function incrCount(){ window.status="Loading..."; loaded++; if(loaded<0)loaded=0; if(loaded>=waitTime*10){ clearInterval(Pid); loaded=waitTime*10; setTimeout('hidebar()',100); } resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0); } function hidebar(){ clearInterval(Pid); window.status=''; //if(ns4)PBouter.visibility="hide"; //else PBouter.style.visibility="hidden"; action(); } function findlayer(name,doc){ var i,layer; for(i=0;i<doc.layers.length;i++){ layer=doc.layers[i]; if(layer.name==name)return layer; if(layer.document.layers.length>0) if((layer=findlayer(name,layer.document))!=null) return layer; } return null; } function progressBarInit(){ PBouter=(ns4)?findlayer('PBouter',document) PBdone=(ns4)?PBouter.document.layers['PBdone'] resizeEl(PBdone,0,0,barheight-2,0); if(ns4)PBouter.visibility="show"; else PBouter.style.visibility="visible"; Pid=setInterval('incrCount()',95); } function resizeEl(id,t,r,b,l){ if(ns4){ id.clip.left=l; id.clip.top=t; id.clip.right=r; id.clip.bottom=b; }else id.style.width=r+'px'; } window.onload=progressBarInit;</font id="purple"> |
|
|
|
|||
|
I'm using Opera (although the same thing appears to happen to me in IE). It didn't preload the images for me, it just waited 20 seconds. More importantly, of course, if you're on diallup it'll take more than 20 seconds to load 1mb of images! If you're on broadband then it still loads fairly quickly so there isn't really much point for a preloader is there?
All of your images are fairly small apart from the header (top) image which is 102kb. This could probably be a lot smaller if it was a JPEG and not a GIF, so give that a try. Of course, we know that the real culprit is the flash, which has about 30 seconds of music? You can decrease the quality that flash uses and of course, use mono not stereo (flash combines the channels). Play around until you get a more appropriate file size. Unless you can get your script to preload that too, I don't really see any point waiting? Plus it does need to work in Opera. |
|
|||
|
Users don't want to watch a percentage bar, they'd much rather read some of the content of the page while they wait for each of the images to load. Research indicates that you've got approx. 8 seconds (56K dialup) before the average user will move on.
|
|
||||
|
This script uses a javascript redirect....
Unless you have inbound links to 'deep content' you will have trouble getting google past this initial page.
__________________
Rob - SEO Specialist Owner & Founder of Webforumz.com I am currently unavailable for private work
Last Blog Entry: Creative Labs threaten developer over home made drivers.... (Apr 1st, 2008)
|
|
|||
|
I think I will just remove the progress bar and instead put a flash intro. But I really like that cookie redirect feature....... No one likes to see a splash/intro page more than once. I think more people should use it.
I just hate having my site not all load at once, it looks like **** in the process. |
|
|||
|
Well unfortunately everyone's site looks like that when it loads!
|
|
||||
|
Again.... a flash intro is not indexable by search engines....
Search engines want CONTENT.... and LOADS of it... especially on the home (root) page. Thats why we don't use one on this site.
__________________
Rob - SEO Specialist Owner & Founder of Webforumz.com I am currently unavailable for private work
Last Blog Entry: Creative Labs threaten developer over home made drivers.... (Apr 1st, 2008)
|
![]() |
| Tags |
| excellent, hard, javascript |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Excellent Forum | Abby | Introduce Yourself | 7 | Oct 20th, 2007 22:30 |
| hard to find | cat | Introduce Yourself | 13 | Jan 6th, 2006 09:48 |