ansaurus

Question

Answer 1

+6 A:

IE7 is trying to resize the image before the DOM tree is fully rendered. You need to run it on document.onload... you'll just need to make sure your function can handle being passed a reference to the element that isn't "this."

Alternatively... and I hope this isn't a flameable offense... jQuery makes stuff like this really, really easy.

EDIT in response to EDIT 1:

You can put document.onload(runFunction); in any script tag, anywhere in the body. it will still wait until the document is loaded to run the function.

Steve Paulo 2008-10-13 20:23:40

usually trying to modify a portion of the dom before its loaded will cause the dreaded "operation aborted" message.

StingyJack 2008-11-06 20:02:41

Answer 2

+2 A:

The way I would do it is to use jQuery to do something like:

$(document).load(function(){
    // applies to all images, could be replaced 
    //by img.resize to resize all images with class="resize"
    $('img').each(function(){
        // sizing code here
    });
});

But I'm no javascript expert ;)

Ross 2008-10-13 20:25:44

Answer 3

+4 A:

If you don't have to support IE 6, you can just use this CSS.

yourImageSelector {
    max-width: 150px;
    max-height: 150px;
}

eyelidlessness 2008-10-13 20:34:03

That's a really good idea... I didn't even know that was an available CSS option. Unfortunately, we need to support IE6. I updated the question to mention that.

rmeador 2008-10-13 20:39:20

Here is how to support IE6:

casey 2010-04-03 03:31:51

Answer 4

+1 A:

setTimeout() may be a workaround if you are really stuck. Just set it for 2 or 3 seconds - or after the page is expected to load.

EDIT: You may want to have a look at this article - all the way at the bottom about IE mem leaks...

StingyJack 2008-11-06 20:06:47

Answer 5

+2 A:

I've noticed that Firefox and Safari both fire "load" events on new images no matter what, but IE 6&7 only fire "load" if they actually have to get the image from the server -- they don't if the image is already in local cache. I played with two solutions:

1) Give the image a unique http argument every time, that the web server ignores, like

<img src="mypicture.jpg?keepfresh=12345" />

This has the downside that it actually defeats caching, so you're wasting bandwidth. But it might solve the problem without having to screw with your JavaScript.

2) In my app, the images that need load handlers are being inserted dynamically by JavaScript. Instead of just appending the image, then building a handler, I use this code, which is tested good in Safari, FF, and IE6 & 7.

document.body.appendChild(newPicture);
if(newPicture.complete){
    doStuff.apply(newPicture);
}else{
    YAHOO.util.Event.addListener(newPicture, "load", doStuff);
}

I'm using YUI (obviously) but you can attache the handler using whatever works in your framework. The function doStuff expects to run with this attached to the affected IMG element, that's why I call it in the .apply style, your mileage may vary.

Jeremy Wadhams 2008-12-11 19:26:25

Thank you very much for this reply! I would have never thought of this myself!

Igor Zinov'yev 2010-04-01 12:02:50

Answer 6

+1 A:

Edit: Due to the structure of our app, it is impractical (bordering on impossible) to run this script in the document's onload.

It is always possible to add handlers to window.onload (or any event really), even if other frameworks, library or code attaches handlers to that event.

<script type="text/javascript">
function addOnloadHandler(func) {
    if (window.onload) {
        var windowOnload = window.onload;
        window.onload = function(evt) {
            windowOnload(evt);
            func(evt);
        }
    } else {
        window.onload = function(evt) {
            func(evt);
        }
    }
}

// attach a handler to window.onload as you normally might
window.onload = function() { alert('Watch'); };

// demonstrate that you can now attach as many other handlers
// to the onload event as you want
addOnloadHandler(function() { alert('as'); });
addOnloadHandler(function() { alert('window.onload'); });
addOnloadHandler(function() { alert('runs'); });
addOnloadHandler(function() { alert('as'); });
addOnloadHandler(function() { alert('many'); });
addOnloadHandler(function() { alert('handlers'); });
addOnloadHandler(function() { alert('as'); });
addOnloadHandler(function() { alert('you'); });
addOnloadHandler(function() { alert('want.'); });
</script>

This answer has a slightly different version of my addOnloadHandler() code using attachEvent. But I discovered in testing that attachEvent doesn't seem to guarantee the handlers fire in the order you added them, which may be important. The function as presented guarantees handlers are fired in the order added.

Note that I pass evt into the added event handlers. This is not strictly necessary and the code should work without it, but I work with a library that expects the event to be passed to the onload handler and that code fails unless I include it in my function.

Grant Wagner 2009-05-04 19:58:50

Answer 7

A:

Max Klymyshyn 2009-10-16 23:14:09

ansaurus

tags:

views:

answers:

img onload doesn't work well in IE7

related questions