•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,802 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,431 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 4522 | 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,589
Reputation:
Rep Power: 7
Solved Threads: 34
Wonderful! Thanks for the posts, a_b.
•
•
Join Date: Jul 2005
Location: Dallas, TX
Posts: 481
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)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Previous Thread: javascript validation
- Next Thread: DateTime - TimeZone conversion with Javascript. Partially working!
