Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

OO Javascript - Image Preloader 1

Status
Not open for further replies.

stephence

Programmer
May 29, 2001
23
GB
Thought some of you might be interested in this.

I've not seen any mention of OO Javascript on this forum - yet it's simple and flaxible.

Here's a little example. Image preloading is very simple - just load the blighters into an array and Robert is your Mother's Brother...

Yet - how many times have you seen a flashy effect started before the images it uses are loaded? Looks pretty crummy really

With this script you can:

1: preload specific sets of images depending upon your requirements as and when you need to
a. when the page has loaded
b. on user action however you code it

2: trigger actions
a. on each or any image on load
b. or wait until they all load and then trigger something
c. don't trigger anything

3. at any time you can check on progress of loading when you need to - the example I used was a slideshow - you don't want the user to be able to page past the slides which have been loaded.

4. there's a progress bar using RoyW 's JSFX_Layer.js to show...well...progress.

5. to create an ImageLoad object: myobject = new JSFX.ImageLoad("Text to show in bar", imageArray, Xpos, Ypos, Width, Height, foreColour, backColour, either array of command/nulls for each image on load or command to execute at end );

6. it works in NS and IE - though I didn't make the slideshow work in NS for the demo

The demo page isn't a work of art but attempts to show it in action:

Image Preloader Object Demo Page:
spins.gif

Stephen C-E
 
Stephen

The script sounds really good, as is the demo, but is it available for others to use. If so, where?

Thanks
Raj
 
Hi Raj

Feel free to use it - all I ask is that you leave a comment reference to me and my homepage on the include of my script and RoyW on the include of his one, and let me know the URL of your page so I can see it in action!

You need to download these two files and upload them to your site, include them in the header of your page and then use the function as detailed on the demo page:

My Script:


Stephen
RoyW's script

I've used the preloader on my daughter Alice's page to do an animation using image swapping JPG's in less space than an animated GIF - see
If you need any more help - do let me know (I'd get notified quickly on a post to this thread) or at home (more slow but I have more time) on
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top