Preloading Random Images - Javascript
Hello, I'm working on a webpage for a hospital, and I have about 30 employee pictures that I've been told to randomly rotate (1 upon every refresh of the homepage). I really don't even care if they go in a sequence, as long as the picture is different everytime the homepage is refreshed. The problem I'm running into is load time.
It is set to preload every one of the employee images (I'd prefer to simply load one each time you visit). Also, I was reading that if I have mouseover buttons, I should preload the mouseover part so there is no lag-time upon placing the cursor on the buttons.
If anyone could please help me understand how to add or take away the preload part. I want to add it to my buttons, and remove it from my employee images. I'm using FrontPage at the moment, but I also have DreamWeaver, with some knowledge of HTML and very little in JS, so I'll do my best to figure out the replies.
If anyone needs to take a look to help them explain, the temporary site is:
http://faculty.sga.edu/cisy2000/slowther (click the top link for the latest updated page)
DaveyBoy posted this at 06:57 — 18th February 2006.
They have: 453 posts
Joined: Feb 2003
if you use dreamweaver to add rollover images, there will be a javascript for preload in the header and the onLoad command is in the tag. When you remove all the rollover instances from your page, DW removes all the code.
timjpriebe posted this at 13:25 — 21st February 2006.
He has: 2,667 posts
Joined: Dec 2004
I believe that, on your site, you should be able to just take out the function FP_preloadImgs() [That would be the line that says 'function FP_preloadImgs()' and the three lines below it] as well as the call to that function in the body tag [in other words, you can delete onload="FP_preloadImgs(/*url*/'Images/New%20Buttons/button15.jpg', /*url*/'Images/New%20Buttons/button16.jpg', /*url*/'Images/New%20Buttons/button1B.jpg', /*url*/'Images/New%20Buttons/button1C.jpg', /*url*/'Images/New%20Buttons/button1E.jpg', /*url*/'Images/New%20Buttons/button1F.jpg', /*url*/'Images/New%20Buttons/button21.jpg', /*url*/'Images/New%20Buttons/button22.jpg', /*url*/'Images/New%20Buttons/button24.jpg', /*url*/'Images/New%20Buttons/button25.jpg', /*url*/'Images/New%20Buttons/button27.jpg', /*url*/'Images/New%20Buttons/button28.jpg', /*url*/'Images/New%20Buttons/button2A.jpg', /*url*/'Images/New%20Buttons/button2B.jpg', /*url*/'Images/New%20Buttons/button2D.jpg', /*url*/'Images/New%20Buttons/button2E.jpg')"].
I haven't tested it, but that should work.
Tim
http://www.tandswebdesign.com
bgogol posted this at 15:27 — 21st February 2006.
They have: 21 posts
Joined: Jan 2006
Ok I see what you mean about load time!
I see a potential for 2 different scripts here. One, you can code your homepage html to show a different employee image on each page load/refresh with a script like:
<script language="JavaScript" type="text/javascript">
var ic = 6; // Number of alternative images
var xoxo = new Array(ic); // Array to hold filenames
xoxo[0] = "http://www.yoursite.com/graphic1.gif";
xoxo[1] = "http://www.yoursite.com/graphic2.gif";
xoxo[2] = "http://www.yoursite.com/graphic3.gif";
xoxo[3] = "http://www.yoursite.com/graphic4.gif";
xoxo[4] = "http://www.yoursite.com/graphic5.gif";
xoxo[5] = "http://www.yoursite.com/graphic6.gif";
function pickRandom(range)
{ if (Math.random) return Math.round(Math.random() * (range-1));
else { var now = new Date(); return (now.getTime() / 1000) % range; } } // Write out an IMG tag using a randomly-chosen image name.
var choice = pickRandom(ic); // --> </script>
Then, you can "post load" the rollover images, or any other image your users will definitely need to load that they don't right away on the home page. This allows you to load all the images needed for people to view your home page, and only THEN start loading the rollover images after that's done:
function postLoad(){
if(!window.name.match(/preLoad.complete/gi)){
var images = new Array('images/yourimage1.gif',
'images/yourimage2.jpg',
'images/yourimage3.gif',
'images/yourimage4.jpg');
var loader = new Array();
for(var i=0; i
Brian Gogol
Rabid Teddies!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.