[Javascript] An image loader nearly working except for IE

[Hakan]

Good solution. An _actual_ image _preloading_ script. :)

Regards,
H

J. Lester Novros II wrote:
> 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