Img onload не работает в IE7

IE7 пытается изменить размер изображения до того, как дерево DOM будет полностью отрисовано. Вам нужно запустить его на document.onload ... вам просто нужно убедиться, что ваша функция может обрабатывать передачу ссылки на элемент, который не является «this».

В качестве альтернативы ... и я надеюсь, что это не является неприкрытым преступлением ... jQuery делает подобные вещи действительно очень простыми.

ИЗМЕНИТЬ в ответ на РЕДАКТИРОВАТЬ 1:

Вы можете поместить document.onload(runFunction); в любой тег скрипта в любом месте тела. он все равно будет ждать загрузки документа, чтобы запустить функцию.

Я бы сделал это с помощью 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;)

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

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

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

Обновлено: вы можете взглянуть на эта статья - полностью внизу об утечках памяти IE ...

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

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, поэтому я называю ее в стиле .применять, ваш пробег может отличаться.

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

Всегда можно добавить обработчики к 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 в добавленные обработчики событий. Это не обязательно, и код должен работать без этого, но я работаю с библиотекой, которая ожидает, что событие будет передано обработчику onload, и этот код не работает, если я не включу его в свою функцию.

Код для 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
}

Вы можете сделать что-то вроде:

var img = new Image();
img.src = '/output/preview_image.jpg' + '?' + Math.random();
img.onload = function() {
  alert('pass')
}