僅在圖像加載后將圖像添加到DOM

Question

目前，我有一個img元素，該元素使用一種top樣式顯示一個精靈，並希望為另一個非精靈圖像動態更改它。 我目前正在執行以下操作：

HTML：

<span id="container">
  <img src="sprite.png" style="top:-40px;">
</span>

使用Javascript：

var newImgEl = document.createElement('img');
newImgEl.setAttribute('src', 'other-image.png'); // (1)
newImgEl.style.top = "0px";

var containerEl = document.getElementById('container');
containerEl.innerHTML = '';
containerEl.appendChild(newImgEl); // (2)

我找不到的是： 將圖像加載到（1）或（2）中嗎？ 我無法測試慢速連接的效果，但我懷疑如果將其加載到（2）中，則樣式將在加載圖像之前更改，從而短暫顯示了精靈的意外部分。 如果是這樣，如何在元素完成后觸發加載並將元素附加到DOM？

請沒有jQuery解決方案。

Answer 1

由於在實際添加到DOM之前只需更改src屬性即可加載圖像，因此我完成了以下操作，不需要超時：

var newImgEl = document.createElement('img');
newImgEl.addEventListener('load', function() {
  newImgEl.style.top = "0px";
  containerEl.innerHTML = '';
  containerEl.appendChild(newImgEl);
});
newImgEl.setAttribute('src', src); // Loads the image.

我還沒有檢查它是否可以跨瀏覽器工作。

Answer 2

您要做的是將新圖像添加到DOM，以便可以從服務器加載該圖像，然后非常快速地重置所有與大小和位置有關的樣式。

您可以設置setTimeout時間，使其最適合您的特定情況。

newImgEl.style.top =“ -10000px”;

function someFunction()
{

var newImgEl = document.createElement('img');
newImgEl.setAttribute('src', 'other-image.png'); // (1)
newImgEl.style.top = "-10000px";

var containerEl = document.getElementById('container');
containerEl.innerHTML = '';
containerEl.appendChild(newImgEl); // (2)


setTimeout(function()
{

 newImgEl.style.top = '0px';

},250);

};