仅在加载图像后才将其添加到DOM

Appending an image to the DOM only after it is loaded

本文关键字：添加 DOM 加载 图像      更新时间：2023-09-26

目前我有一个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 ?

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

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

你要做的就是将新图像添加到DOM中，这样它就可以从服务器加载，然后非常快速地重置所有与大小和位置相关的样式。

您可以根据您的具体情况设置setTimeout时间。

newImgEl.style。 

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);
};
相关文章：