Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 4916 | Replies: 14
 |
•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation: 
Rep Power: 4
Solved Threads: 3
Junior Poster
Actually, using this type of mechanism, the images are loaded on demand....
For an example of ondemand loading of images, check out this page: http://homepages.ihug.co.nz/~jlittle/imgs/images.html
You'll see images are loaded when you click on them.. and if your connection is slow enough, you should also see a please wait message (though I've found this doesn't always seem to work so well in IE).
A way of 'always' getting a different image is to implement a time based seed... this can be calculated in to avoid random providing the same image each load... a large set of images to choose from will also help.
For an example of ondemand loading of images, check out this page: http://homepages.ihug.co.nz/~jlittle/imgs/images.html
You'll see images are loaded when you click on them.. and if your connection is slow enough, you should also see a please wait message (though I've found this doesn't always seem to work so well in IE).
<html>
<script type="text/javascript">
var images = new Array("a.png", "b.png", "c.png");
function randomImageSelector(){
var imageNode = document.getElementById("randomImage");
var index = Math.floor(Math.random() * images.length);
imageNode.src = images[index];
imageNode.alt = images[index];
}
window.onload = function(){
randomImageSelector();
};
</script>
<body>
<img src="placeHolder.png" id="randomImage"/>
</body>
</html>
A way of 'always' getting a different image is to implement a time based seed... this can be calculated in to avoid random providing the same image each load... a large set of images to choose from will also help.
•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation:
Rep Power: 4
Solved Threads: 3
Junior Poster
<html>
<script type="text/javascript">
var images = new Array("http://homepages.ihug.co.nz/~jlittle/imgs/NZULtWt3rdOpen8.jpg",
"http://homepages.ihug.co.nz/~jlittle/imgs/OpenMensRace.jpg",
"http://homepages.ihug.co.nz/~jlittle/imgs/vic_snr_8_2003.jpg",
"http://homepages.ihug.co.nz/~jlittle/imgs/vic_8_2_2003.jpg");
function randomImageSelector(){
var imageNode = document.getElementById("randomImage");
//var index = Math.floor(Math.random() * images.length);
// getTime returns number of ms since 1/1/1970 - regardless of how you tell the time.
// since my image set here is quite small, this doesn't really provide a much different
// response than the random implementation.
// to get a better result, you could try getSeconds or even getMinutes...
// these return a number between 0-59 ...
var index = (new Date().getTime())%images.length;
imageNode.src = images[index];
imageNode.alt = images[index];
document.getElementById("ms").innerHTML = index;
}
window.onload = function(){
randomImageSelector();
};
</script>
<body>
<img src="" id="randomImage"/>
<div id="ms"></div>
</body>
</html>
•
•
Join Date: Dec 2004
Posts: 1,592
Reputation:
Rep Power: 7
Solved Threads: 35
Wonderful! Thanks for the posts, a_b.
•
•
Join Date: Jul 2005
Location: Dallas, TX
Posts: 482
Reputation:
Rep Power: 4
Solved Threads: 19
Posting Pro in Training
you could even do away with the need for the array if you named your images sequentially. Using alpha_foobar's code to start, let's say you had 4 images. Name them 0.png, 1.png, 2.png and 3.png
change
var index = (new Date().getTime())%images.length;
to
var index = (new Date().getTime())%4;
and change
imageNode.src = images[index];
to
imageNode.src = index + ".png";
Then when you want to add another picture to the list, just name it 4.png and change
var index = (new Date().getTime())%4;
to
var index = (new Date().getTime())%5;
change
var index = (new Date().getTime())%images.length;
to
var index = (new Date().getTime())%4;
and change
imageNode.src = images[index];
to
imageNode.src = index + ".png";
Then when you want to add another picture to the list, just name it 4.png and change
var index = (new Date().getTime())%4;
to
var index = (new Date().getTime())%5;
•
•
Join Date: Aug 2006
Posts: 1
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Re: Alternating backgrounds? •
•
•
•
Originally Posted by alpha_foobar 
Actually, using this type of mechanism, the images are loaded on demand....
For an example of ondemand loading of images, check out this page: http://homepages.ihug.co.nz/~jlittle/imgs/images.html
You'll see images are loaded when you click on them.. and if your connection is slow enough, you should also see a please wait message (though I've found this doesn't always seem to work so well in IE).
<html> <script type="text/javascript"> var images = new Array("a.png", "b.png", "c.png"); function randomImageSelector(){ var imageNode = document.getElementById("randomImage"); var index = Math.floor(Math.random() * images.length); imageNode.src = images[index]; imageNode.alt = images[index]; } window.onload = function(){ randomImageSelector(); }; </script> <body> <img src="placeHolder.png" id="randomImage"/> </body> </html>
A way of 'always' getting a different image is to implement a time based seed... this can be calculated in to avoid random providing the same image each load... a large set of images to choose from will also help.
******************************
I understand your answer is from quit a while ago, but since I'm new on this forum I'm responding just now. I too want to have alternating pictures when reloading in a non-server-based way, but realy alternating and no repeating of the same image. You write about a time based seed. Can you tell me more about that. Or is ther a totally different way to do it. After all, your method IS randomizing, and not alternating!
Thanx, Sjaak
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
