Delay image load question

@JMRKERJan 06.2008

My question concerns if it is possible to delay an image load until a link is clicked.

Here’s what I would like to do, just don’t know if it is feasible.

I have a number of directories (50 or more)
that contain images (usually less than 20 per directory).

I want to have an onClick event linked to the directory name that will, when clicked,
load only the images of the clicked on directory for display.

Is this a reasonable question for javascript or should I just create separate .HTML files
in each subdirectory, which will then display when the directory link is clicked?

The directory names and image file names are pre-defined,
so parsing the information into links is not a problem.

to post a comment

JavaScript

9 Comments(s) _↴

@cgishackJan 07.2008 — #You can do it in JavaScript.

You would have to have all teh file names typed out in the code though.

You could store the file names in some array.

If you used a server side language (like php) you could read a dir and get the file names that way.

So i guess its up to you, do you want to hard code all the file names or read the directly from the dir.

Drew

@JMRKERauthorJan 07.2008 — #Thanks for the response, but maybe I didn't make myself clear enough.

Getting a list of the directories is not a problem.

Getting the filenames in each directory placed into a text file is not a problem.

Reading the file names from a .js file array or using an AJAX method is not a problem.

What I don't want to do is load all the image files immediately when the script is first run.

It takes too long to execute and uses too much system resources.

What I'm asking is: Can I call up individual image files from different directories when a button is clicked after the page has initially loaded? I am assuming I can use a <div> tag where I can insert the images using .innerHTML or something that would be more cross-browser compatible. The purpose is to preview the images in a particular directory but not have to wait for all the images to be loaded before any can be viewed.

I could use the windows 'Explore' option and display the directories as 'thumbnails', but I want more control of what is shown than the windows option provides. That is where the javascript control question come in.

Thanks 'cgishack' for your time and any other thoughts are appreciated.

@cgishackJan 07.2008 — #Well you can call individual images dynamically...

One the click you can append the file's path/url to an img tag.

<i>
 </i>&lt;!-- IMAGE IN HTML --&gt;
 &lt;img src="default.gif" id="mainImage" /&gt;
 
 //JavaScript Code
 document.getElementById("mainImage").src = "/newDir/newImageFileName.gif"

Maybe I am not understanding correctly.. sorry.

@JMRKERauthorJan 07.2008 — #Thanks again 'cgishack'.

I've tried that and it works well. Only problem is: I can only load one image at a time.

I could create a set number of <img> tags, but the directories contain a variable number of images.

What I'm trying to simulate with JS is the display you get if you do the following:

1. Right click on 'START' and choose 'Explore'

2. Drill down to a directory with many images and change the 'Views' to 'Thumbnails'

You shoud see a number of icon with the images displayed. Now I want to print this, but there is not an option to do this.

Hence the need of a script to simulate this display as a webpage that I could then 'File-Print' as needed.

Does that help clear it up?

@cgishackJan 07.2008 — #Ahh.. I see

So you just want to know how to call out the images as needed and display them like windows explorer 'thumbnails' does?

right?

@JMRKERauthorJan 07.2008 — #Basically, yes.

The explorer, to me, is limited because:

1. I cannot printout the page.

2. I cannot eliminate all on the page that are not images (It lists all images, text, applications, etc.)

3. I cannot alter the positions to add any room to put in comments or descriptions of the images.

Thanks again for the thoughts as you've given me some alternate ideas.

@cgishackJan 07.2008 — #JMRKER,

I made a sample that you can mabe work with.

It calls the images ass needed...

[ see attachment ]

If you need further explanation of how it works, let me know.

* please excuse the images, i just made them in MS Paint. LOL

[upl-file uuid=7b6b75c9-8a92-4180-91b9-e1e78fffe612 size=11kB]DirSample.zip[/upl-file]

@JMRKERauthorJan 07.2008 — #'cgishack':

Works great!

Hope you had it previously developed because it looks like an awlful lot of work!

I certainly didn't expect to get a full script, as all I wanted was to know if it was worth pursuing using JS. Got much more than I asked for.

I see the concept and think I can modify it to fit my needs fairly easily!

I have written a PERL script that extracts the directories and filenames and I should be able to modify it easily to create the .push() array elements.

Thank you very much!!! I'll be on the lookout to see if I can help you in the future.

Jay

@cgishackJan 07.2008 — #No problem,

I like to provide a working script because it might help someone else down the road too.

using this method wont load all the images on page load, just as requested.

Enjoy.

Drew

Also in #JavaScript _↴

I'm new to JS and missing something small. Please help storing functions in arrays and calling them...OO solution?Shutting off Javascript

Success!

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

Tweet This

Delay image load question

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Delay image load question

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴