[Javascript] Building an image loader...

Fri Jul 8 13:01:48 CDT 2005

Guillaume:

I'm pushing up against my limitations just trying to understand what you
want to accomplish with this script. What is the application for the
project? Will it load a large number of images to be displayed on demand?

Harvey

-----Original Message-----
From: Guillaume [mailto:javascript at webdesignofficina.com] 
Sent: Thursday, July 07, 2005 11:39 AM
To: [JavaScript List]
Subject: Re: [Javascript] Building an image loader...

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/20050708/936d9d36/attachment.htm>