Load images one after one 1

[Sleidia]

Hi everyone

Does someone know how to load heavy images one after one with javascript?

The thing is that I need to have each image load after the previous one is finished loading. So no timer of any sort must be used.

And I would like to avoid the use of innerHTML because I need to separate the javascript from the HTML. The HTML is made of a div that contains all the images mixed with some texe. The javascript is supposed to loop through all images elements inside the div (I know how to do it), and then load each image while preventing the browser from loading everything at once (I don't know how to do it).

I use Prototype BTW.

Thanks in advance for any help

 

[feherke]

Hi

I am afraid there is no way to stop the browser loading the resources.
However you could use dirty trick like delivering the HTML with [tt]<img [maroon]src[/maroon][teal]=[/teal][green]"sleidia:///path/to/image.ext"[/green]>[/tt], then use JavaScript to remove the sleidia:// part.

But personally I would prefer to not involve HTML in that step.

[b]var[/b] image[teal]=[[/teal]
  [green][i]'/path/to/first.image'[/i][/green][teal],[/teal]
  [green][i]'/path/to/second.image'[/i][/green][teal],[/teal]
[teal]][/teal]

[b]function[/b] [COLOR=darkgoldenrod]load[/color][teal]([/teal]nr[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] img[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]Image[/color][teal]()[/teal]
  [b]if[/b] [teal]([/teal]nr[teal]<[/teal]image[teal].[/teal]length[teal]-[/teal][purple]1[/purple][teal])[/teal] img[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [COLOR=darkgoldenrod]load[/color][teal]([/teal]nr[teal]+[/teal][purple]1[/purple][teal])[/teal] [teal]}[/teal]
  img[teal].[/teal]src[teal]=[/teal]image[teal][[/teal]nr[teal]][/teal]
[teal]}[/teal]

[COLOR=darkgoldenrod]load[/color][teal]([/teal][purple]0[/purple][teal])[/teal]

The above will just load the images and supposes the browser will get them from the cache when they will be actually used. Or you could change the function abit to replace the original array's elements with the loaded [tt]Image[/tt] objects :

[b]function[/b] [COLOR=darkgoldenrod]load[/color][teal]([/teal]nr[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] src[teal]=[/teal]image[teal][[/teal]nr[teal]][/teal]
  image[teal][[/teal]nr[teal]]=[/teal][b]new[/b] [COLOR=darkgoldenrod]Image[/color][teal]()[/teal]
  [b]if[/b] [teal]([/teal]nr[teal]<[/teal]image[teal].[/teal]length[teal]-[/teal][purple]1[/purple][teal])[/teal] image[teal][[/teal]nr[teal]].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [COLOR=darkgoldenrod]load[/color][teal]([/teal]nr[teal]+[/teal][purple]1[/purple][teal])[/teal] [teal]}[/teal]
  image[teal][[/teal]nr[teal]].[/teal]src[teal]=[/teal]src
[teal]}[/teal]

But there could be easier ways depending on what you will finally do with the images.

Sorry, I do not know Prototype.


Feherke.

http://free.rootshell.be/~feherke/

 

[Sleidia]

Thanks a lot feherke but I've used a much more simple solution that seems to work.

The thing is that I was trying to avoid a very large download of images right from the homepage (where the portfolio is located).

So, I simply remove the innerHTML of the inside of the portfolio div on page load. Then I reinsert its content when the visitor click on the "view portfolio" button.

It looks like some of the images are being downloaded before the script removes the HTML bit though ... but maybe it's the browser caching, I don't know.

		function TMP_folio(action) {

		    if(document.getElementById( 'page-folio' )) {

						if (action == 'hide') {
						
						TMP_fhtml = document.getElementById( 'page-folio' ).innerHTML;
		        document.getElementById( 'page-folio' ).innerHTML = '';

		        }
		        
						if (action == 'show') {

		        document.getElementById( 'page-folio' ).innerHTML = TMP_fhtml;

		        }

        }

		}