[Javascript] An image loader nearly working except for IE

[J. Lester Novros II]

Hello everyone,

I'm a longtime lurker on this list and since this thread is generating so much 
traffic I thought I'd join in and add my 2 cents to the fray.

Guillaume, I've put a modified version of your testcase on my own server which 
worx in FF 1.0 win/mac/linux, Opera 8.0 win/mac/linux, Safari 2.0 and, more to 
the point, in xPloder 5.0/5.5/6.0:

    <http://lester.demon.nl/test/imgLoaderTest.html>

I've commented the script but for the impatient :) here's an explanation.

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.

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.

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.

The only drawback I haven't been able to solve so far [but I threw this together 
in about 30mins] is that the image needs its width and height specifically set 
to set the size of the masking DIV; also I use 'style.width' and 'style.height' 
rather than 'offsetWidth' and '-height' which necessitates the use of 'parseInt' 
to position the 'loading' text. I assume, however, that that has something to do 
with the image not being appended to the document [and therefore not being part 
of the DOM] at the moment of querying those values. A little more tweaking would 
probably solve this.

Let me know if you need anymore help.

l8R lES
-- 
"Anti-virus products for Unix servers occupy a useful niche in the market, not
because there are many viruses that infect Unix platforms but because they help
prevent these servers from hosting Windows malware."  John Leyden - the Register
http://www.denhaag.org