在加载替换图像时，replaceChild会将间距更改一秒

Question

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

你们有没有想法如何在第一张图像消失然后被替换时让第二张图像停留在它的位置？

编辑：找到一种方法可以预加载最终效果很好的页面HERE。谢谢！

Answer 1

这里有几种选择：

1. 使用位置的css属性将两个图像保存在其父级中（它们不依赖于彼此）
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 固定宽度，并使用浮动，我认为第二张图片将保留在原位，一试。

Answer 3

也许这会有所帮助

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

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