IE 6,7,8不支持圖像對象或DOM中的onload事件

Question

我的應用程序要顯示的圖像很大，應該調整大小以統一顯示，並具有固定的寬度和高度，為此，我在圖像的加載圖像中編寫了JavaScript方法，如下所示：

var autoResizeImage = function(targetWidth, targetHeight, objImg) {
    if (0 >= targetWidth || 0 >= targetHeight) {
        // Ilegal parameters, just return.
        return;
    }

    var img = new Image();
    img.src = objImg.src;

    // Calculate the width and height immediately the image is loaded. 
    img.onload = function() {
        var hRatio;
        var wRatio;

        var width = img.width;
        var height = img.height;

        var calcWidth = width;
        var calcHeight = height;

        wRatio = targetWidth / width;
        hRatio = targetHeight / height;

        if (wRatio < hRatio) {
            calcHeight = targetHeight;
            calcWidth = (targetHeight / height) * width;
        } else {
            calcWidth = targetWidth;
            calcHeight = (targetWidth / width) * height;
        }

        objImg.width = calcWidth;
        objImg.height = calcHeight;
    };
};

HTML圖片：

<img src='PATH' onload='autoResizeImage(100, 100, this)'>

除了IE 6,7,8以外，這種方法在Chrome和Firefox上都可以正常使用。 我為此感到痛苦，如何在IE 6,7,8上完成此任務。

非常感謝。

Answer 1

我首先要說的是，如果要提供要以特定尺寸顯示的圖像，則首先應該從服務器以正確的尺寸發送它們。 發送過大的圖像並讓瀏覽器調整它們的大小是不好的做法，因為這意味着您消耗的帶寬超出了需要。 您的用戶的帶寬可能受到限制，因此可能無法欣賞頁面上的額外加載時間。

但是，我真的不知道為什么您需要完全調整運動的大小？ HTML默認情況下會將圖像縮放到包含該圖像的<img>標簽的大小，因此您要做的就是為<img>標簽指定height和width樣式，並且縮放將自動完成。 完全不需要弄亂Javascript。

<img src='PATH' style='width:100px; height:100px;'>

這應該適用於所有瀏覽器； 不需要JS。 圖像應為您縮放。

但是，理想情況下，如我所說，如果您不打算全尺寸使用它們，請盡量避免將過大的圖像發送到頁面。

Answer 2

更改分配順序。 首先分配onload函數，然后分配src屬性。 至少適用於IE 8。

 var div = document.getElementById('div'); var img = new Image(); img.onload = function() { var text = document.createTextNode('loaded ' + img.src); div.appendChild(text); }; window.setTimeout(function() { var random = Math.random(); img.src ="http://stackoverflow.com/users/flair/450989.png?random=" + random; }, 1000); div.appendChild(img); 

 <div id="div"/>