img onload не работает хорошо в IE7

Если Вы не должны поддерживать IE 6, можно просто использовать этот CSS.

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

setTimeout () может быть обходным решением, если Вы действительно застреваете. Просто установите его в течение 2 или 3 секунд - или после того, как страница, как будут ожидать, загрузится.

РЕДАКТИРОВАНИЕ: можно хотеть взглянуть на эта статья - полностью внизу об утечках мадам IE...

Я заметил что Firefox и Safari оба события "загрузки" огня на новых изображениях независимо от того, что, но IE 6& 7 только огонь "загрузка", если они на самом деле должны получить изображение от сервера - они не делают, если изображение уже находится в локальном кэше. Я играл с двумя решениями:

1) Дают изображению уникальный http аргумент каждый раз, что веб-сервер игнорирует, как

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

Это имеет оборотную сторону, что это на самом деле побеждает кэширование, таким образом, Вы тратите впустую пропускную способность. Но это могло бы решить проблему, не имея необходимость завинчивать с Вашим JavaScript.

2) В моем приложении, изображения, которые должны загрузить обработчики, вставляются динамично JavaScript. Вместо того, чтобы просто добавить изображение, затем создавая обработчик, я использую этот код, который тестируется хороший в Safari, FF и IE6 & 7.

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

я использую YUI (очевидно), но Вы можете атташе обработчик с помощью любых работ в платформе. Функция doStuff ожидает работать с это присоединенный к затронутому элементу IMG, вот почему я называю его в стиль .apply, Ваш пробег может варьироваться.

Путем я сделал бы это, должен использовать jQuery, чтобы сделать что-то как:

$(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
    });
});

Но я не эксперт JavaScript ;)

Редактировать: Из-за структура нашего приложения, это нецелесообразно (граничит с невозможно) запустить этот скрипт в загрузка документа.

Всегда можно добавить обработчики в window.onload (или любое другое событие), даже если другие инфраструктуры, библиотеки или код присоединяют обработчики к этому событию.

<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>

Этот ответ имеет немного другую версию моего кода addOnloadHandler () с использованием attachEvent . Но в ходе тестирования я обнаружил, что attachEvent , похоже, не гарантирует, что обработчики запускаются в порядке их добавления, что может быть важно. Представленная функция гарантирует, что обработчики запускаются в добавленном порядке.

Обратите внимание, что я передаю evt в добавленные обработчики событий. Это не является строго необходимым, и код должен работать без него,

Код для jQuery. Но сделать циферблат на других фреймворках несложно. Действительно полезно.

var onload = function(){ /** your awesome onload method **/ };
var img = new Image();
img.src = 'test.png';

// IE 7 workarond
if($.browser.version.substr(0,1) == 7){
    function testImg(){
        if(img.complete != null && img.complete == true){ 
            onload();
            return;
        }
        setTimeout(testImg, 1000);
    }
    setTimeout(testImg, 1000);
}else{
    img.onload = onload
}