如何做一個過程另一個結束後在JavaScript

我想通過Javascript功能來添加圖像，然後計算html元素的寬度如何做一個過程另一個結束後在JavaScript

window.onload=function(){ 
document.getElementById('x').addEventListener('click', function(e){ 
    var el = document.getElementById('xx'); 
    el.innerHTML = '<img src="img.jpg" />'; 
    var width = el.offsetWidth; 
    ..... 
    }, false); 
}

但由於JavaScript行爲的所有進程同時，我將得到加載圖像之前元素的寬度。我如何確保圖像已加載到內容中;然後計算元素寬度？

更新：感謝您的回答，但我認爲存在誤解。 img src="img.jpg" />在DOM文檔中不存在。它將在稍後添加Javascript。然後，當試圖通過Id來捕捉元素時，它可能不存在。

來源

2013-06-04 Googlebot

您應該聽取img上的加載事件。 –

圖像預加載器！看看它。 – epascarello

不完全是加載事件，請參閱http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded –

來源

2013-06-04 23:05:57 pvnarula

這正是我所需要的。謝謝！ – Googlebot

隨時！ :) :) – pvnarula

這是未經測試，但如果你的圖像添加到DOM，設置onload/load事件處理程序和然後指定圖像的src，事件處理應觸發（一旦它的加載），並允許你找到寬度。

這是不完美的，不過，因爲如果圖像是從瀏覽器的緩存加載onload/load事件可能無法在所有（尤其是在Chromium/Chrome的火，我相信，雖然這是一個錯誤的內存可能，或者可能沒有，自此以後就已經修復）。

來源

2013-06-04 22:26:58

第2段應該注意：onload特別是icky。我想我已經看過一個旨在嘗試使其表現更好的jQuery插件。 – user2246674

你可以給在IMG的ID並執行以下操作： -

var heavyImage = document.getElementById("my-img");//assuming your img ID is my-img 
heavyImage.onload = function(){ 
    //your code after image is fully loaded 
}

來源

2013-06-04 22:27:23 pvnarula

感謝您的回答，但是當我更新問題時，圖像元素來自Javascript事件，並且不是DOM文檔的一部分。 – Googlebot

它將如何來自JS事件？你能詳細說明嗎？ – pvnarula

我更新了代碼以顯示一個典型示例。 – Googlebot

對於Chrome有錯誤，你可以使用以下命令： -

var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';//create a blank source 

var tImg = document.getElementById("my-img");//get the image 
var origSrc = tImg.src;//get the original src 
tImg.src = BLANK;//change the img src to blank. 
tImg.src = origSrc;//Change it back to original src. This will lead the chrome to load the image again. 
tImg.onload= function(){ 
    //your code after the image load 
}

來源

2013-06-04 22:32:35 pvnarula

您可以使用庫所謂的PreloadJS或者你可以嘗試這樣的事情：

//Somewhere in your document loading: 
loadImage(yourImage, callbackOnComplete); 

function loadImage(image, callbackOnComplete){ 

    var self = this; 
    if(!image.complete) 
     window.content.setTimeout(
     function() { self.loadImage(image, callbackOnComplete)} 
     ,1000); 
    else callbackOnComplete(); 
}

我在處理延遲加載的圖像base64時使用了此功能。

來源

2013-06-04 23:12:21 gal007

如何做一個過程另一個結束後在JavaScript

回答

相關問題