[Javascript] An image loader nearly working except for IE

[Guillaume]

J. Lester, thanks for joining us on this.
I added a few comments below about this mail and the script...

> Both the IMG and the masking DIV are wrapped in another DIV. The 
> wrapper DIV has a 'position: relative', the mask has a 'position: 
> absolute'. This results in the masking DIV exactly overlaying the 
> image while the wrapper still flows with the other text in the page; 
> I've put a few Ps in the page and floated the wrapper left to 
> illustrate this. The loading message is yet another DIV as a child of 
> the mask so I can position the text vertically thru styles [in this 
> case a top-margin]. Finally, the wrapper is inserted in the document.


That's actually another way of handling things trough Css... In the last 
version 0.9.2 we would just need to assign a class to the p... Adding 
many divs, until now we just have one, called "loader", makes it more 
complex to handle, adding steps into the styling process... In fact to 
keep it simple to handle we'll only need one div with a p in it...

>
> The image gets an 'onload' handler in standards compliant browsers and 
> an 'onreadystatechange' handler in xPloders. The onload handler is 
> assigned a function that just sets the mask DIV's display property to 
> 'none'; the onreadystatechange is a bit more involved in that it tests 
> for the value of the image's 'readyState': if it has a value of 
> 'complete' the function does the same as the onload function, i.e. 
> setting the display property.

onreadystatechange is a good go... So i'll try to add your line to the 
script to see if we can get IE to catch it...

>
> All the above is done thru script, so a browser with script switched 
> off or a script-incapable browser [such as lynx] doesn't 'see' any of 
> this and gets the unmasked image embedded in a DIV between <NOSCRIPT> 
> tags. The DIV, incidentally, is necessary to keep a validator from 
> complaining about invalid XHTML.

I haven't try to validate the document we are working on yet... I think 
there should not be any problem on this.
As for the noscript tag it's a solution we thought about before... And 
we had some issues with it on Safari and Opera: they weren't catching it 
if JS was active... You are solving this with writing the image and it's 
properties within the Js... The idea of the script is, once finished, 
not to have to put our hands again in it... So this also adds steps in 
the process of using it... Also true for the styles fired up with Js... 
In an ideal world we would have to just tell the Js to handle img that 
has a class="loadImg" assigned in the  main document, and that's all... 
No inline script in the page, just a few tags we fire up with Js and we 
then give some styles only through Css... That would make the script 
very easy to manage, re-use, friendly and unobtrusive...


Your script works wonderfully well but we have to keep in view a simple 
way to go: the img is in the page, the script fires a mask and a p, the 
Css will style it all...
I'll try to use your onreadystatechange line tor target Xploder...

Thanks you very much for this help, just look at the comming versions 
and see if we can get it to work better...

Guillaume.