Random Image on Page-Load (Script Inside) [Archive] - HTML Forums

View Full Version : Random Image on Page-Load (Script Inside)

arsie

01-22-2005, 08:36 PM

Hey guys!

I am sort of in a dilemma here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Random Images</title>

<script type="text/javascript">
//<![CDATA[

var images=new Array();
images[0]="image_1.jpg";
images[1]="image_2.jpg";
images[2]="image_3.jpg";
images[3]="image_4.jpg";
images[4]="image_5.jpg";
images[5]="image_6.jpg";
images[6]="image_7.jpg";
images[7]="image_8.jpg";
images[8]="image_9.jpg";
images[9]="image_10.jpg";

var i=Math.floor(Math.random()*images.length);

function randomImage() {

document.getElementById("random").src=images[i];
}

onload=randomImage;

//]]>
</script>

</head>
<body>

<div>
<img id="random" alt="random image" src="" />
</div>

</body>
</html>

As you can see, this code is perfect for what I am attempting to do.

All I want is for a randomly chosin image to load on every refresh.

Here's the catch... with this script, everything works fine... that is, as long as the person viewing isn't blocking scripts.

When the viewer has scripts disabled, there will be no image shown. This is not good.

Is it possible to make a default image load just incase scripts are disabled?

COBOLdinosaur

01-22-2005, 10:58 PM

Just give the image a scr value in the tag. when script is enabled it will overwrite the original image, and when there is no scripting the scr value in teh tag will display.

arsie

01-22-2005, 11:33 PM

yeah, you can call me stupid.

That actually works, though not as well as I would like.

See, now we have the default image loading even when the script is enabled. In other words the default image loads up and then the script will take over and load one of the random images.

So we actually have 2 images loading, it doesn't look professional. I refresh my site and I see an image load up, then another image load up over it.

Any way to make the default image only show up when the script is disabled?

Basically, I don't want to see the default image unless it is necessary. All I want is for one image to load up with every refresh instead of two.

Is this possible?

Thanks for the help by the way. Much appreciated.

COBOLdinosaur

01-22-2005, 11:42 PM

Seeing the double image is not the problem. It is just a symptom to a slow loading page. If i tis that slow then the problem you should be solving is getting rid of the bloat that sows it down. Very few user are going care if there is an image swap, but 99% will be unhappy is the page is slow enough to make the double load an issue.

About 2% of users care about look. The rest of us are only interested in content which is why some of the ugliest sites on the internet like yahoo and ebay, are also the most popular.

Cd&

arsie

01-23-2005, 12:13 AM

I guess I fall under the 2% category. :rolleyes:

I mean, is there really no way to overcome the image swap?

It's just unnecessary and unprofessional.

it's really really really bothering me. I am gonna try to figure this one out.

I guess I wouldn't mind if the image was a farther down the page so that by the time someone got there it would have already been done. But in this particular example I have the image as the first thing you will see. So it looks really wierd when it changes all of a sudden.

COBOLdinosaur

01-23-2005, 01:11 AM

Try this. Put a script inside the div with the image and try a noscript tag:

<div>
<script>
document.write('<img id="random" alt="random image" src="" />'
</script>
<noscript>
<img id="random" alt="random image" src="default.jpg" />
</noscript>
</div>

That might work.

coothead

01-23-2005, 03:03 AM

Hi there arsie,

sorry misread the question :o

coothead

01-23-2005, 03:47 AM

Hi there arsie,

I have now read the question correctly :)
Using createElement will solve your dilemma...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Random Images</title>

<script type="text/javascript">
//<![CDATA[

var images=new Array();
images[0]="image_1.jpg";
images[1]="image_2.jpg";
images[2]="image_3.jpg";
images[3]="image_4.jpg";
images[4]="image_5.jpg";
images[5]="image_6.jpg";
images[6]="image_7.jpg";
images[7]="image_8.jpg";
images[8]="image_9.jpg";
images[9]="image_10.jpg";

var i=Math.floor(Math.random()*images.length);

function randomImage() {

var elem=document.createElement("img");
elem.setAttribute("src",images[i]);
elem.setAttribute("title",images[i]);

document.getElementById("random").appendChild(elem);

}

onload=randomImage;

//]]>
</script>

</head>
<body>

<div id="random">

<noscript>
<img alt="default image" src="image_1.jpg" />
</noscript>

</div>

</body>
</html>

arsie

01-23-2005, 10:42 AM

COBOLdinosaur, I appreciate your help. Thanks!

coothead, I bow before your knowledge. Your code did exactly what I wanted. Thank you!

You guys are the best. Everything is perfect now. Thanks again! :D