javascript - replaceChild は、置換画像のロード中に 1 秒間間隔を変更します

Question

助けてくれてありがとう。私のサイトでは、同じ div に 2 つの画像が隣り合って配置されています。最初の画像を置き換えるために replaceChild を使用しています。すべてが機能していますが、最初の画像を削除すると、新しい画像が読み込まれて最初の画像スポットに配置される前に、2 番目の画像が一瞬左にシフトします。

最初の画像が消えてから置き換えられている間、2番目の画像をその場所にとどめる方法について何かアイデアはありますか?

編集：ページをプリロードできる方法を見つけました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に固定幅を与え、floatを使用することで、2 番目の画像が所定の位置にとどまると思います。試してみてください。

Answer 3

多分これが役立つでしょう

1. 新しい画像を隠れた場所にロードします。
2. 古いイメージを取り除く
3. 次に、新しい画像を再表示して所定の位置に移動します。

これにより、新しいイメージが配置される前に古いイメージが失われる時間が短縮されます。