JavaScript Forum

**World** · 11-26-2009, 06:32 PM

I have 24 images in my gallery, and even though I have preloading code, it doesn't work.

I want that all 24 images preload in the background, so when a user clicks a thumbnail, the image is available right away.

Currently, it only downloads when the user clicks on the thumbnail.

I have read of jQuery preloading plug-ins. They look complicated and I have no idea how to implement it into my code.

Can you help me with this problem?

**MapMaster** · 11-27-2009, 07:19 AM

you can declare your images in invisible (display: none) div.

Code:

<div style="display: none">
<img ...>
<img ...>
...
<img ...>
</div>

Then show images as usual you've did.

**chrishirst** · 11-27-2009, 08:02 AM

Declare them as backgrounds to elements in the style sheet, then switch the className with the onclick event.

**wayfarer07** · 11-27-2009, 10:26 AM

Quote:

Originally Posted by World

I have read of jQuery preloading plug-ins. They look complicated and I have no idea how to implement it into my code.

Not that I am aware of, and if there is, it is for fulfilling some more advanced purpose, not just simple preloading.

To preload an image in jQuery, all you need to do is this:

Code:

$('<img>').attr('src', 'path/to/image.jpg');

In regular JavaScript, this is expressed as:

Code:

document.createElement('img').src = 'path/to/image.jpg';

**freezea** · 12-03-2009, 10:02 AM

<HEAD>
<SCRIPT LANGUAGE="JavaScript">



</script>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>