Javascript - Load new images on each page load/refresh

Hello..
I'm looking for a javascript with will load three different random images (there are about 300+) on each page re-fresh or page load. The images are displayed in the banner.

See http://www.bainbridgetwp.com to see the images at the top in the banner.

Currently, we're using the Ultimate Fade-in slideshow (v2.4) and created three different fadeslideshows to display the images. But, with doing this, I noticed that there's a slow-down of the pages being loaded because the slideshow loads all 300+ images everytime.

So, 300+ images times 3 different slideshows equals almost 1000 images being loaded everytime. Images are small and are 5kb-3kb in size.

Thanks.. -Jeff

Is javascript the only way you want to do this? Since it is a page load or refresh you could do it with server side code and it would be triggered for each of those. I made something similarish here using php:

http://www.dynamicdrive.com/forums/s...ad.php?t=57526

If you have any questions let us know.

If sticking with Ultimate Fade, you could select the images from a master array before inserting them in the init. If all of the images are of the same size or would fit into the same sized box:

Code:

---

var galleries = [];
(function(){
        var images = [
                ['photo1.jpg'],
                ['photo2.jpg'],
                ['photo3.jpg'],
                ['photo4.jpg'],
                ['photo5.jpg'],
                ['photo6.jpg'],
                ['photo7.jpg'],
                ['photo8.jpg'],
                ['photo9.jpg'],
                ['photo10.jpg'] // <-- no comma after last image array
        ], i = 1;
        images.sort(function(){return 0.5 - Math.random();});
       
        for(i; i < 4; ++i){
                galleries.push(new fadeSlideShow({
                        wrapperid: "fadeshow" + i, //ID of blank DIV on page to house Slideshow
                        dimensions: [140, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
                        imagearray: images.splice(0, 3),
                        displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
                        persist: false, //remember last viewed slide and recall within same session?
                        fadeduration: 500, //transition duration (milliseconds)
                        descreveal: "ondemand",
                        togglerid: ""
                }));
        }
})();

---

This is instead of the three inits you must currently be using and will populate:

HTML Code:

---

<div id="fadeshow1"></div><div id="fadeshow2"></div><div id="fadeshow3"></div>

---

Note: If linking the images, targeting the links, and/or adding descriptions, this may be done in the usual fashion, ex:

Code:

---

        var images = [
                ['photo1.jpg', "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
                ['photo2.jpg'],
                ['photo3.jpg'],
                ['photo4.jpg'],
                ['photo5.jpg'],
                ['photo6.jpg'],
                ['photo7.jpg'],
                ['photo8.jpg'],
                ['photo9.jpg'],
                ['photo10.jpg'] // <-- no comma after last image array

---

This is exactly what I was looking for. Thank you very much. -Jeff

Code:

---

<script language="JavaScript">
<!--

/*
Random Image Link Script- By JavaScript Kit(http://www.javascriptkit.com)
Over 200+ free JavaScripts here!
Updated: 00/04/25
*/

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="http://www.computerhope.com/banners/banner.gif"
myimages[2]="http://www.computerhope.com/banners/banner2.gif"
myimages[3]="http://www.computerhope.com/banners/banner3.gif"
myimages[4]="http://www.computerhope.com/banners/banner4.gif"
myimages[5]="http://www.computerhope.com/banners/banner2.gif"
myimages[6]="http://www.computerhope.com/banners/banner3.gif"

//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.javascriptkit.com"
imagelinks[2]="http://www.netscape.com"
imagelinks[3]="http://www.microsoft.com"
imagelinks[4]="http://www.dynamicdrive.com"
imagelinks[5]="http://www.freewarejava.com"
imagelinks[6]="http://www.cnn.com"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>

---

In the future, please start a new thread for a new question.

The above script is outdated and flawed, but serviceable. The flaw is that it will pick 1 more often than any other image/link combo and will never pick the last image/link combo. That can be fixed by numbering the links and images starting from 0 instead of 1 and by removing:

Code:

---

if (ry==0)
 ry=1

---

I'm not sure what you mean by a new page. All of those links in your post are new pages. To open the link in a new tab simply add the (red) target info:

Code:

---

document.write('<a target="_blank" href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')

---

Thanks John it worked. I'll do as advised next time. Cheers!!!

Quote:

---

Originally Posted by jscheuer1

If sticking with Ultimate Fade, you could select the images from a master array before inserting them in the init. If all of the images are of the same size or would fit into the same sized box:

Code:

---

var galleries = [];
(function(){
        var images = [
                ['photo1.jpg'],
                ['photo2.jpg'],
                ['photo3.jpg'],
                ['photo4.jpg'],
                ['photo5.jpg'],
                ['photo6.jpg'],
                ['photo7.jpg'],
                ['photo8.jpg'],
                ['photo9.jpg'],
                ['photo10.jpg'] // <-- no comma after last image array
        ], i = 1;
        images.sort(function(){return 0.5 - Math.random();});
       
        for(i; i < 4; ++i){
                galleries.push(new fadeSlideShow({
                        wrapperid: "fadeshow" + i, //ID of blank DIV on page to house Slideshow
                        dimensions: [140, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
                        imagearray: images.splice(0, 3),
                        displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
                        persist: false, //remember last viewed slide and recall within same session?
                        fadeduration: 500, //transition duration (milliseconds)
                        descreveal: "ondemand",
                        togglerid: ""
                }));
        }
})();

---

This is instead of the three inits you must currently be using and will populate:

HTML Code:

---

<div id="fadeshow1"></div><div id="fadeshow2"></div><div id="fadeshow3"></div>

---

Note: If linking the images, targeting the links, and/or adding descriptions, this may be done in the usual fashion, ex:

Code:

---

        var images = [
                ['photo1.jpg', "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
                ['photo2.jpg'],
                ['photo3.jpg'],
                ['photo4.jpg'],
                ['photo5.jpg'],
                ['photo6.jpg'],
                ['photo7.jpg'],
                ['photo8.jpg'],
                ['photo9.jpg'],
                ['photo10.jpg'] // <-- no comma after last image array

---

---

Can an onclick event be added?
onclick="return confirm('You are about to leave our website. \n Click OK to continue on to the website.')"

Please start a new thread for a new question.