[Javascript] An image loader nearly working except for IE

Mon Jul 18 09:19:47 CDT 2005

Yeah great script!

The only suggestion I'd make is to pass the image url and insertion point ID
as parameters so that you can put the script in an include file and then
call it from the body onload tag with the parameters.

init(p_imageURL, p_insertionPointID)
{
...
}

<body onload='Javascript:
init("http://www.hablablow.com/devX/loadTest2/forrest.jpg","insertionPoint")
;'>

Peace
Lau

-----Original Message-----
From: Hakan [mailto:hakan at backbase.com]
Sent: Monday, 18 July 2005 6:02 PM
To: [JavaScript List]
Subject: Re: [Javascript] An image loader nearly working except for IE

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
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript