Preload images

gj0519 · 03-16-2009, 04:14 PM

I am trying to load 4 images next to each other from an array I have created. So far I have not been able to get them to display. Not sure what I am doing wrong.

Array:

Code:

var imgs = new Array('images/boat.jpg','images/desert_isle.jpg','images/greenscene.jpg','images/house.jpg','images/logo.jpg')

my code internal code:

Code:

<div id="headpanel">
<script src="randimg_soln.js" type="text/javascript">
document.getElementById("imgs")
</script>
</div>

Thanks,
GJ

Philip M · 03-16-2009, 04:46 PM

Try this:-

Code:

<head>
<script type = "text/javascript">

var arImages=new Array();

function Preload() {
var temp = Preload.arguments; 
for (i=0; i < temp.length; i++) {
arImages[i]=new Image();
arImages[i].src=temp[i];
}
}

Preload('one.gif','two.gif','three.gif','four.gif');  // start loading now 

</script>
</head>

<body>

<div id="headpanel">
<img name="myimage1" src="one.gif">
<img name="myimage2" src="two.gif">
<img name="myimage3" src="three.gif">
<img name="myimage4" src="four.gif">
</div>

Naturally you will need to change the names of the images to those applicable to your site.

A teacher informed my son that "There are two words which you should never use in school homework - one is cool and the other is gross". "No problem", replied the boy, "What are the two words?"

gj0519 · 03-16-2009, 05:23 PM

Thanks,

Now i have to added in 12 more images and have them randomly display when the page is refreshed. So I took the function and placed it in an external js file, and I have created a random function. I am not sure how to get my images to randomly display.

Rand function:

Code:

function rand(size){
  var rNum=Math.ceil(Math.random()* 16);
  return rNum;
}

var randValue = randInt(16);
var images = NewImage[randValue];

Philip M · 03-16-2009, 06:50 PM

Try this to shuffle your images into random order:-

Code:

var imgArray = ['img1.gif','img2.gif','img3.gif','img4.gif','img5.gif', 'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif'];
function randOrd(){return (Math.round(Math.random())-0.5); }
imgArray.sort(randOrd);
var pic1 = imgArray[0]; // first random image
var pic2 = imgArray[1]; // second random image
var pic3 = imgArray[2]; // third random image
var pic4 = imgArray[3]; // fourth random image

// and so on

alert (imgArray);

for (var i =0; i<imgArray.length; i++) {
document.write("<img src = imgArray[i]>")
}

gj0519 · 03-16-2009, 08:24 PM

I don't get any images to display, right now I added that into my html code and maybe I have something wrong in here. Ideally I want to put the script in a js file and just call that to keep my code cleaner.

Code:

<body onLoad="randOrd">
<div id="wrapper">
<div id="logo"><img src="images/logo.gif" alt="" /></div>
<script type="text/javascript">
Var imgArray = ['images/boat.jpg','images/desert_isle.jpg','images/greenscene.jpg','images/house.jpg','images/logo.jpg','images/Mountain.jpg'];

function randOrd() {return (Math.round(Math.random())-0.5);}
imgArray.sort(randOrd);
var pic1 = imgArray[0];
var pic2 = imgArray[1];
var pic3 = imgArray[2];
var pic4 = imgArray[3];
var pic5 = imgArray[4];
var pic6 = imgArray[5];

alert (imgArray);
</script>
</head>
<script type="text/javascript">
<div id="headpanel">
for(var i = 0; i < imgArray.length; i++) {
   document.write("<img src= imgArray[i]>")
   }

</script>
</div>

Thanks,

GJ

freedom_razor · 03-16-2009, 08:41 PM

Shouldn't this:

Code:

<script type="text/javascript">
<div id="headpanel">

be like that:

Code:

<div id="headpanel">
<script type="text/javascript">

gj0519 · 03-16-2009, 08:48 PM

That fixed where nothing was showing, now I think I have a path issue with my images.

Thanks,

GJ

gj0519 · 03-16-2009, 11:25 PM

I have changed my code around and can not get the images to display, by looking at part of code can someone see if I might have code in the wrong place. Right now I am just trying to get the images to display then add in more that will have a random function on page refresh.

Code:

<html>
<head><title></title>
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="images/logo.gif" alt="" /></div>
<!--
<div id="headpanel"><img src="images/Rocks.jpg" alt="" width="160" height="106" /><img src="images/greenscene.jpg" alt="" /><img src="images/house.jpg" alt="" /><img src="images/Mountain.jpg" alt="" /></div>
-->
<div id="headerpanel">
<script type="text/javascript">
if (document.images) {
var images = new Array();
images[1] = new Image();
images[2] = new Image();
images[3] = new Image();
images[4] = new Image();

images[1].src = "images/boat.jpg";
images[2].src = "images/desert_isle.jpg";
images[3].src = "images/greenscene.jpg";
images[4].src = "images/house.jpg";
preload_image_object = new Array();

for(var i = 0; i < images.length; i++){
preload_image_object[i] = new Image();
preload_image_object[i].src = images[i];
   
}
</script>
</div>