javascript - replaceChild 在加载替换图像时更改间距一秒钟

Question

在此先感谢您的帮助。所以在我的网站上，我有 2 张图片在同一个 div 中彼此相邻。我正在使用 replaceChild 替换第一个图像。一切正常，但是当它删除第一个图像时，第二个图像会在新图像加载并放置在第一个图像点之前向左移动一瞬间。

你们对我如何使第二张图像保持在原位，而第一张图像消失然后被替换有什么想法吗？

编辑：找到了一种方法，我可以在这里预加载页面，最终效果很好。谢谢！

Answer 1

这里有几个选项：

1. 使用 css 属性作为 position 将两个图像保持在它们的父级中（它们不相互依赖）
2. 将每个图像放在具有硬编码大小的 div 中
3. 硬编码图像的高度/宽度并替换 src 属性

Answer 2

HTML：

<div>
<img id="image1" src="image1.png" alt="image1" />
<img id="image2" src="image2.png" alt="image2" />
</div>

CSS：

div
{
   overflow:hidden;
   width:200px; 
}
#image1
{
   width:100px;
   height:100px;
   float:left;
}
#image2
{
   width:100px;
   height:100px;
   float:right;
}

通过给DIV和img一个固定的宽度，并使用float，我认为第二个图像将保持原位，试一试。

Answer 3

也许这会有所帮助

1. 将新图像加载到隐藏位置。
2. 删除旧图像
3. 然后取消隐藏新图像并将其移动到位。

这只是减少了旧图像在新图像到位之前消失的时间。