javascript - 仅在图像加载后将图像添加到DOM

目前，我有一个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解决方案。

最佳答案

由于在实际添加到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.

我还没有检查它是否可以跨浏览器工作。