javascriptで画像を動的に追加した場合の画像描画の遅れ。

Question

マウスオーバーで動的に画像を切り替えたりしているのですが、

サイト読み込み後にブラウザのタブを切り替えて、また戻ってから操作すると、動的に追加した画像の描画が一瞬遅れるようになるのですが、解決方法はありますか？

タブを切り替えなかったり、リロードすればちゃんと動作します。

コードは掲載するには多いのでgifのキャプチャ画像をリンクします。

• クリック時にDOMを追加する仕様にしています。
• 一度画面からフォーカスが外れるとこの現象が起きます。

よろしくお願いいたします。

ブラウザ：
Google Chrome 96.0

---

通常の場合
https://giphy.com/gifs/YJlzfsMRGAsJRZRtxe

一度タブを切り替えた場合
http://www.giphy.com/gifs/Vn4vJQbdsJtanOpFMQ

Comments

[m.ts10806]

実際のコードや起きている現象が視覚的に分かる画面キャプチャ、ブラウザなど提示されないことには何とも言えません。
画像もどのような画像（形式、サイズなど）かにもよると思いますし、ネットワークの問題がゼロとも言えません。

[AquilaniAlberto]

失礼しました。追記します。

[m.ts10806]

コード全部ないと再現できませんか？

[AquilaniAlberto]

すいません。単体のライブラリというよりも拡張機能的な感じで作っているので、
ピックアップはむずかしいです。

クリック時にDOMを追加する仕様にしています。

Answer 1

画像をpreloadしておくと改善される可能性があります。

リンク種別: preload

可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用します。

「すでに preload は指定している」などと後出しされると無駄な回答になるので、質問時にコードは開示してください。

Comments

[AquilaniAlberto]

キャプチャ画像を追加しました。

Answer 2

GoogleChromeのみでの現象でした。
Safariなどのブラウザでは問題なし。

ゲストでの閲覧だと問題なく、Googleでログインしている場合に発生する現象？
拡張機能も全て解除してみたけどダメでした？削除しないとダメ？

タブの開きすぎなど、他の現象でしょうか。
とりあえず、jsの問題ではなさそうです。