更改圖像組件的src屬性和獲取大小屬性

我會遇到一個問題，同時通過javascript img元素上進行更改：更改圖像組件的src屬性和獲取大小屬性

我通過鍵盤上的箭頭鍵建立通過不同的圖像，以循環的框架。我通過將所有圖像url加載到一個數組中，然後相應地更改img元素的src屬性來完成此操作。

到目前爲止一切正常。但是現在我想要顯示當前圖像的naturalHeight和naturalWidth。不幸的是，當我循環顯示圖像時，顯示當前圖像之前的圖像的大小，雖然元素顯示正確的圖像。

這是否與加載順序和渲染有關？

如果有人能幫我解決這個問題，我將非常感激。

問候

最大

上的評論：

我簡單地通過加載圖片：

imageLeft.setAttribute("src", imagesOld[rowCounter]); 
imageRight.setAttribute("src", imagesNew[rowCounter]);

我有一個函數用於更新大小信息：

function updateSizeInformation() { 
    var imageLeftX = $find("<%= txtXImageLeft.ClientID %>"); 
    var imageLeftY = $find("<%= txtYImageLeft.ClientID %>"); 
    var imageRightX = $find("<%= txtXImageRight.ClientID %>"); 
    var imageRightY = $find("<%= txtYImageRight.ClientID %>"); 
    var imageLeft = document.getElementById("imageLeft"); 
    var imageRight = document.getElementById("imageRight"); 

    imageLeftX.set_value(imageLeft.naturalWidth); 
    imageLeftY.set_value(imageLeft.naturalHeight); 
    imageRightX.set_value(imageRight.naturalWidth); 
    imageRightY.set_value(imageRight.naturalHeight); 
}

和一個函數的圖像適合父DIV：

function fitImagesToContainers() { 
    var divLeft = document.getElementById("imageContainerLeft"); 
    var divRight = document.getElementById("imageContainerRight"); 
    var imageLeft = document.getElementById("imageLeft"); 
    var imageRight = document.getElementById("imageRight"); 

    if (imageLeft.naturalWidth > imageLeft.naturalHeight) { 
     imageLeft.setAttribute("width", divLeft.clientWidth); 
     imageLeft.setAttribute("height", divLeft.clientWidth * (imageLeft.naturalHeight/imageLeft.naturalWidth)); 
    } else if (imageLeft.naturalWidth < imageLeft.naturalHeight) { 
     imageLeft.setAttribute("height", divLeft.clientHeight); 
     imageLeft.setAttribute("width", divLeft.clientHeight * (imageLeft.naturalWidth/imageLeft.naturalHeight)); 
    } 
}

來源

2015-08-14 Max Power

您是否將高度和寬度屬性添加到img標記，當您更新圖像src時，還可以更新heith寬度屬性。 –

當您設置「源」圖像元素的屬性頁面沒有加載，它通常鼓動的圖像文件資源的異步檢索。圖像onload事件觸發後，圖像元素屬性應代表檢索圖像的屬性，但在此之前無法預知。

如果您提供的代碼同步執行，它會遇到您報告的問題。

在Mozilla Firefox（至少）中，如果在相同的腳本執行中立即檢查，圖像屬性可以是之前圖像的屬性，因爲新的/下一個圖像尚未檢索。如果頁面之前加載了相同的圖像，會發生什麼情況可能是不可預知的 - 我發現它立即給出正確的尺寸值。

我用標準的javascript測試了這個，不想提示如何在jQuery中編寫onload事件處理函數。我在javascript, image onload() doesnt fire in webkit if loading same image上遇到了另一個可能感興趣的StackOerflow問題。

來源

2015-08-15 07:41:23 traktor53

更改圖像組件的src屬性和獲取大小屬性

回答

相關問題