[Javascript] Building an image loader...

[Guillaume]

I came across a Js property wich could be very usefull in the case 
mentioned below: image.complete

Image.complete
JavaScript 1.1+, JScript 1.0+
Nav3+, IE3+, Opera3+

Syntax
image.complete

Description
The complete property of the Image object is a boolean value that 
specifies if an image
has finished loading. After an image has completely loaded, the property 
is changed to true. If the load is aborted or an error occurs during the 
loading process, the property will be set to false.

Guillaume.

>
>
> Hello all,
>
> I would like to have some help on building an image loader.
> The idea is basic: a page should display a high resolution image that 
> should remain hidden behind a masking layer, wich has a higher z-index 
> value and displays a simple loading message, such as "Loading data". 
> When loaded, the masking layers disappears, displaying the image.
> I used a previous loading script wich was handling this, with the 
> ability to load an array of images and along the way was crashing Ie.
> For those interested, the script was built by Glenn Murphy at Bodytag 
> <http://bodytag.org/> ( worth a visit ) and is called bt_loader 
> <http://bodytag.org/nav.php?u=bt_loader/> .
> I must say the structure of the script i'd like to build is inspired 
> from his script.
> Here is the idea for the structure of this script:
>
>var image = ""
>var imageWeight = ""
>var checkLoaded = 0
>
>function hideImg() {
>
>document.getElementById('load').style.display = 'block';
>// First thing to do is hide the img with this layer.
>document.write(<p class="loadingText"> Loading content: "imageWeight"+"Ko" </p>);
>// In this same layer add the text: Loading content + img weight + Ko.
>// Adding a class to p, to style it and eventualy make it easier to remove, when loaded.
>
>}
>
>function getImageWeight() { 
>
>// Get the image weight that is loaded,
>// that has the class="image" attached. Benefits: reusable or not on certain images, pages etc...
>// Get an image weight with Js ? I this possible ? Maybie, with .length ?... 
>// Or should i specify manually it's weight in the content.htm page,
>// with a value such as: 
>// <img src="1.jpg> <script type="text/javascript">var imageWeight=(1200)</script>...
>// where 1200 would be the image weight in Ko...
>
>    |var image = document.getElementsByTagName("img");
>  for (var i=0; i < |imageWeight.length|; i++) {// Initialize a value i... i<imageWeight.length i know this is absolutely wrong !
>    if (image[i].className.match("image"))|// Get all the image in the document that have class="image" attached...
>||    i= the sum of all img with class="image" attached // add up the sum of all images concerned...
>						      // Btw the possible number of images concerned are 0,1 or an array...
>    var imageWeight = Math.round((i)/100);// Returns the weight, the sum of all images (i) in Ko...
>    
>        }
>    }
>
>function loadImg() {
>
>    ||var checkLoaded = Math.round((i/imageWeight)*100);
>	
>	if(checkLoaded == 100) {// If we have reached 100% of the sum loaded,
>
>        showImg();// remove the loading layer and the loading text created earlier.
>
>        }
>
>    }
>
>function showImg() {
>    ||
>document.getElementById('load').style.display = '';
>// Remove the display block and give the priority back to the css where this layer is set to hidden...
>// document.write(<p> Loading content: "imageWeight"+"Ko" </p>);
>// Do i need to remove this as well, as it is part of the layer that will be hidden ? If yes how do i kill it ?
>// kill the node or the class ? ... I'm lost on this one...
>
>}
>
>function killLoad() {// If the image is broken, abandon the process after a certain amount of time... 8 seconds here
>|	for (var i=0; i < |imageWeight.length|; i++)|{ 
>	||if(i < 0) for {// If image weight value stays < 0...
>	setTimeout(8*1000);// ... for 8 seconds ...	
>	showImg()// ... Execute the previous function.
>	}
>      }
>    }
>
>document.write(hideImg());// Initialize the script immmediately when the page is first loaded
>
>
> Et voilà... I've pushed things up to the frontier of my skills, so 
> sorry for the mess...
> But i think this structure is understandable... I might be missing 
> some important things ( cross browser compatibility, accessibility... 
> ) so any improvement are warmely welcomed.
> Thanks a lot for any help on this.
>
> Guillaume.
>
>------------------------------------------------------------------------
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>  
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050707/113acbdb/attachment.htm>