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

Question

目前，我有一个 img 元素，它使用 top 样式来显示 Sprite ，并希望将其动态更改为另一个非 Sprite 图像。我目前正在执行以下操作:

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)中加载，样式将在图像加载之前改变，短暂地显示 Sprite 的非预期部分。如果是这样，我如何触发加载并在完成后将元素附加到 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.

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