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 =＆＃34; -10000px＆＃34;;

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);

};

仅在加载后才将图像附加到DOM

2 个答案: