Jump to content


Photo

how to preload images,,


  • Please log in to reply
4 replies to this topic

#1 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 01 June 2006 - 06:13 PM

Hi to all,,

I'm working on a website, which has a lot 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,,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)

#2 king arthur

king arthur
  • Members
  • PipPipPip
  • Advanced Member
  • 335 posts
  • LocationUK HQ

Posted 01 June 2006 - 06:39 PM

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

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"

Then in your image rollover event

onmouseover="document.mybutton.src=on_image.src" onmouseout="document.mybutton.src=off_image.src"

...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.
Sir Isaac Newton said "If I have seen farther, it is by standing on the shoulders of giants". But it is not recorded as to whether he said it before or after he was hit on the head by a falling apple.

#3 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 02 June 2006 - 07:21 AM

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,,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)

#4 king arthur

king arthur
  • Members
  • PipPipPip
  • Advanced Member
  • 335 posts
  • LocationUK HQ

Posted 02 June 2006 - 08:38 AM

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.
Sir Isaac Newton said "If I have seen farther, it is by standing on the shoulders of giants". But it is not recorded as to whether he said it before or after he was hit on the head by a falling apple.

#5 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 02 June 2006 - 09:32 AM

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,,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users