Jump to content

Archived

This topic is now archived and is closed to further replies.

GBS

how to preload images,,

Recommended Posts

Hi to all,,

I'm working on a website, which has [u]a lot[/u] of images (about 4Mb)...
The idea should be to make a preloader, and once all the images loaded, then the user would be redirected on the main html page,,...
& the images could be then displayed "on the fly",...

Any idea/tips to do that ?

Thanks in advance,,

l8tr,,

Share this post


Link to post
Share on other sites
Why make your visitors wait for all the images to load? Better to let them see at least something, while the rest of the page loads.

If you have image rollovers you need to preload them as you want them to appear instantly as the mouse moves over the element.

You just do

[code]on_image = new image;
off_image = new image;

on_image.src = "path/to/my/on_image.jpg"
off_image.src = "path/to/my/off_image.jpg"[/code]

Then in your image rollover event

[code]
onmouseover="document.mybutton.src=on_image.src" onmouseout="document.mybutton.src=off_image.src"
[/code]

...for example. Preloading large images will leave visitors looking at a blank screen for a length of time, still if you want to do this the idea is the same.

Share this post


Link to post
Share on other sites
Hi,,
& thanks for the comment & fast reply,,
Well,
[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
Why make your visitors wait for all the images to load? Better to let them see at least something,
[/quote]
It's because the site is mostly graphical,... & I also need to show the images in a "defined order",... :)

My idea for the moment would be:
1- preload the images in a html file, showing & getting the % of the downloaded datas,
---- could be done in flash, I guess,... but I don't know a lot about flash,, ... :s,,
---- so, maybe I will try it in php/javascript (php would get the size of the files to download & get the progression, as javascript would show a status bar, using dynamic graphic)

2- then, go to the main page,, having the images "on the fly",,,

Do you think it could be do-able in javascript/php ?... or have I to learn flash ? :)

l8tr,,

Share this post


Link to post
Share on other sites
I don't see why it couldn't be done in PHP and Javscript. I guess I would use PHP to get the filenames and sizes, put them in an array for JS to read, JS then works out the total size and preloads each file in the array and can work out the percentage after each file. PHP might be needed to dynamically generate the status bar as there's not really anything in JS to do that unless you're thinking of using several predefined graphic images.

Share this post


Link to post
Share on other sites
Yep,,, I guess it could be done too in php+javascript,...

I will keep you inform of the result,,...

work in progress,,,
0% -----------> 10%

Thanks again for your comments,, :)

l8tr,,

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.