/    Sign up×
Community /Pin to ProfileBookmark

displaying preloaded images in table

Copy linkTweet thisAlerts:
Jan 09.2008

how do i go about displaying images that i have preloaded in a table using javascript?

the following code is what i have in the head section of my html.

<script language=”JavaScript”>

function preloader()

{
// counter
var i = 0;

// create object
imageObj = new Image();

// set image list
var images=new Array()
images[0]=”../images/resized/image01.jpg”
images[1]=”/images/resized/image02.jpg”
images[2]=”../images/resized/image03.jpg”
images[3]=”../images/resized/image04.jpg”
images[4]=”../images/resized/image05.jpg”
images[5]=”../images/resized/image06.jpg”
images[6]=”../images/resized/image07.jpg”
images[7]=”../images/resized/image08.jpg”
images[8]=”../images/resized/image09.jpg”
images[9]=”../images/resized/image10.jpg”
images[10]=”../images/resized/image11.jpg”
images[11]=”../images/resized/image12.jpg”
images[12]=”../images/resized/image13.jpg”
images[13]=”../images/resized/image14.jpg”
images[14]=”../images/resized/image15.jpg”
images[15]=”../images/resized/image16.jpg”
images[16]=”../images/resized/image17.jpg”
images[17]=”../images/resized/image18.jpg”
images[18]=”../images/resized/image19.jpg”
images[19]=”../images/resized/image20.jpg”
images[20]=”../images/resized/image21.jpg”
images[21]=”../images/resized/image22.jpg”
images[22]=”../images/resized/image23.jpg”
images[23]=”../images/resized/image24.jpg”
images[24]=”../images/resized/image25.jpg”
images[25]=”../images/resized/image26.jpg”
images[26]=”../images/resized/image27.jpg”
images[27]=”../images/resized/image28.jpg”
images[28]=”../images/resized/image29.jpg”
images[29]=”../images/resized/image30.jpg”

// start preloading
for(i=0; i<=29; i++)
{
imageObj.src=images[i];
}

}

</script>

any help is greatly appreciated.

thanks.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Arty_EffemJan 09.2008 — how do i go about displaying images that i have preloaded in a table using javascript?

var images=new Array()
[/quote]
That code won't actually preload anything.

[I]

images[/I] is a poor choice for a name as it may conflict with the document.images collection.

When initialising an array, you don't need to use subscripts:
[CODE]var img=[
"../images/resized/image01.jpg", "/images/resized/image02.jpg",
"../images/resized/image03.jpg" /*etc*/
];
[/CODE]

[CODE] // start preloading

for(i=0; [COLOR="Red"]i<=29[/COLOR]; i++)
{
imageObj.src=images[i];
}
[/CODE]
[/QUOTE] There is no element [29], so this will generate an error.

You need an array of image objects; reassigning the .src in a loop will only preload the last image in the list.

[CODE]

imageObj = []; //This array must be either global as shown, or have a lifetime sufficient for the images to finish loading.

for(i=0; i<img.length; i++)
{
imageObj[i]=new Image();
imageObj[i].src=images[i];
}

[/code]
Copy linkTweet thisAlerts:
@JPM0887authorJan 10.2008 — fixed the preloading code. how do i go about displaying the images in a table?

[CODE]<script language="JavaScript">

function preloader()
{
// counter
var i = 0;


// create object
imageObj = [];

//int n = 0;
//for(n = 0;n <= 30;n++){
//image[n] = images[n]

// set image list
var img=[
"../images/resized/image01.jpg",
"../images/resized/image02.jpg",
"../images/resized/image02.jpg",
"../images/resized/image03.jpg",
"../images/resized/image04.jpg",
"../images/resized/image05.jpg",
"../images/resized/image06.jpg",
"../images/resized/image07.jpg",
"../images/resized/image08.jpg",
"../images/resized/image09.jpg",
"../images/resized/image10.jpg",
"../images/resized/image11.jpg",
"../images/resized/image12.jpg",
"../images/resized/image13.jpg",
"../images/resized/image14.jpg",
"../images/resized/image15.jpg",
"../images/resized/image16.jpg",
"../images/resized/image17.jpg",
"../images/resized/image18.jpg",
"../images/resized/image19.jpg",
"../images/resized/image20.jpg",
"../images/resized/image21.jpg",
"../images/resized/image22.jpg",
"../images/resized/image23.jpg",
"../images/resized/image24.jpg",
"../images/resized/image25.jpg",
"../images/resized/image26.jpg",
"../images/resized/image27.jpg",
"../images/resized/image28.jpg",
"../images/resized/image29.jpg",
"../images/resized/image30.jpg"
]



for(i=0; i<img.length; i++)
{
imageObj[i]=new Image();
imageObj[i].src=img[i];
}

}

</script>

</head>

<body>
<A HREF="javascript:preloader()"></A>
<table style="table-layout:fixed;" border="1" width="646" height="900">

<tr height="60">
<td bgcolor="#3b5998">
<font face="Peake" size="5" color="#FFFFFF"><center>Blue Elephant Jewelers</center></font>
<font face="Cotillion" size="4" color="#FFFFFF"><center>Beautiful Jewelry for Beautiful Women</center></font>
<p>&nbsp;</p>
</td>
</tr>

<tr height="900">
<td width="646">

</td>
</tr>
</table>


</body>

[/CODE]

any help is appreciated. thanks.
Copy linkTweet thisAlerts:
@Arty_EffemJan 10.2008 — fixed the preloading code. how do i go about displaying the images in a table?[/QUOTE]Exactly how do you want them displayed?
Copy linkTweet thisAlerts:
@JPM0887authorJan 10.2008 — preferably in 2 columns with 2 pictures in each row. with space beside each picture so that i may input text
Copy linkTweet thisAlerts:
@Arty_EffemJan 10.2008 — preferably in 2 columns with 2 pictures in each row. with space beside each picture so that i may input text[/QUOTE]If you're preloading 30 images I assume this is to be a slideshow.

Please give exact details of how you want this to work.
Copy linkTweet thisAlerts:
@JPM0887authorJan 11.2008 — what i am trying to do is build a page that is like a photo album with these images. where there will be thumbnails, and then beside the thumbnails there will be some product descriptions. when someone clicks on an image or the words "more info" in the product description, they will be taken to another page where more detailed product description will be listed. along with a button that will allow someone to purchase the product.
Copy linkTweet thisAlerts:
@Arty_EffemJan 11.2008 — what i am trying to do is build a page that is like a photo album with these images. where there will be thumbnails, and then beside the thumbnails there will be some product descriptions. when someone clicks on an image or the words "more info" in the product description, they will be taken to another page where more detailed product description will be listed. along with a button that will allow someone to purchase the product.[/QUOTE]
If that's the full functionality of the page, you don't need to use a script to preload anything; just display the images in HTML placeholders.
×

Success!

Help @JPM0887 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...