Welcome to WebmasterWorld Guest from 100.26.182.28

Forum Moderators: open

Message Too Old, No Replies

a JS image gallery that caches all images while the user views one

there has to be a script out already there that does this

     
11:51 pm on Feb 23, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 9, 2005
posts:111
votes: 0


I was thinking it would be nice to have an image gallery that "caches" an entire directory of pictures in the background while the user is viewing one of them, thus making navigating the gallery seem nearly instant in most cases.

In other words, as soon as the page is loaded, javascript could start downloading all the pics from a directory and save them in memory or disk or something and then make it so when you click "next picture", it just loads what it's already saved instead of waiting until you click to download the picture.

It seems like somebody ought to have already written a script to do this, but I can't seem to find it....maybe my eyes are just skipping over it or something.

>>Do you know of one?

1:59 am on Feb 24, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


//!* replace [b][red][/red][/b] with unbroken pipe characters.
//
preloads = ['one','two','three'];
preloads.baseURL = '../images/';
preloads.ext = '.jpg';
preloadArray(preloads)
//
function preloadArray(arr)
{
var base = arr.baseURL[red][/red]'';
var ext = arr.ext[red][/red]'';
var img;
for(var k=0,src;src=arr[k];k++)
{
img = new Image();
img.src = base+src+ext;
arr[k] = img;
}
}

If the baseURL or extension vary, put it into the array strings, and give
that property an empty string, or leave it out entirely.

The function replaces the src strings with image objects.

3:57 am on Feb 24, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 9, 2005
posts:111
votes: 0


thanks bernard, and cheer up, you ARE an alpha-plus, despite the rumors.

that code is pretty nice, but I was hoping to find something that will actually display the first image as soon as it's loaded and then keep chaching the others *in the background*.
then when I want to go to the next image in the set, I click a "next image" link and the image src is replaced with the next one in the array without reloading the page. If it's already cached, great, but in case I click "next image" to quickly and the next image is NOT in cache, the script should be able to handle that too.

5:19 am on Feb 24, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:July 29, 2003
posts:72
votes: 0


An alternative is to use the DOM and CSS to do it - have the page with all the <img id="..." src="..." class="gallery"> tags there, then when someone wants to view a specific image, just use javascript to change the display attribute of the one you're viewing to "none", and one you want to view to "block" or "inline"...

Just remember to add a style="display:inline" to the first img so it can be seen...

CSS -


img.gallery { display:none; }

Javascript -


function showImg(id)
{
var x=document.getElementsByTagName('img');
for(var i=0;i<x.length;i++){
if(x[i].className=='gallery'){
if(x[i].id==id)x[i].style.display='inline'; // Could use "block"
else x[i].style.display='none';
}}}

The downside to this is it obviously needs a browser capable of supporting it ;-)

Robin

8:17 am on Feb 24, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


Rumours?!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members