I am trying to delay the loading of a large image, by using javascript to load it after the rest of the webpage is complete. That part is simple. The complicating factor is that the image is an alpha-transparent PNG, so for IE I need to apply the Microsoft Alpha Image Loader fix after the image has loaded. The difficulty here is timing the events. The PNG-fixing script must not be applied before the image has been loaded and cached by the browser, or IE locks while it loads the image!
Obviously I would like to use the onload attribute on my script-generated image to fire the event after the image has finished loading. This works fine in Firefox and Opera, but not in IE.
I have tried various approaches, including image source replacement instead of generating a new image; but nothing works. I would really appreciate some help!
My current site is pretty complex, and uses a lot of additional scripting. So I have created a minimal test case page to illustrate the problem. (The test site only uses a small, non-alpha channel image).
Test page (http://www.h2index.com/source/temp/index.html) (validates, by the way)
Test page source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href=http://codingforums.com/archive/index.php/"style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
function createIMG() {
png=document.createElement("img");
png.setAttribute("onload","imageLoaded()");
png.setAttribute("src","wireframe.png");
document.getElementById("holder").appendChild(png);
}
function imageLoaded() {
alert('image loaded');
}
</script>
</head>
<body>
<p><a href=http://codingforums.com/archive/index.php/"#" onclick="createIMG();">Make it happen!</a></p>
<p>When you click the link, the javascript function
<code>createIMG()</code>should add an image to the page.
When the image has finished loading, its <code>onload</code>
should fire and generate an alert box.</p>
<p>Unfortunately, IE does not fire the <code>onload</code>
event, so in IE you will not see an alert box.</p>
<div id="holder"></div>
</body>
</html>
Not too sure about this but instead of this line
png.setAttribute("onload","imageLoaded()")
have you tried
png.onload=function(){
imageLoaded()
}
with the above I got the alert in IE and Mozilla
Gollum
03-17-2006, 09:06 PM
Not too sure about this but instead of this line
png.setAttribute("onload","imageLoaded()")
have you tried
png.onload=function(){
imageLoaded()
}
with the above I got the alert in IE and Mozilla
Excellent, it works! :)
Thanks for that. It may not be "the DOM way" to do it, but I'll take the low road ;)
*edit* Just wanted to add that I've now implemented this in the real site, and it works perfectly :)
TOP
