ファイルシステムのある場所に配置されている次の画像と前の画像にユーザーが1つずつ移動できるWebアプリケーションに取り組んでいます。
画像の読み込み中に問題が発生しました。高解像度の画像がコンテナーに読み込まれると、ちらつき、レンダリングされます。onload イベントを使用して、画像が次のように完全に読み込まれるようにしています。
image.onload = function () {
$('#img').attr('src', image.src);
};
image.src = imagePath;
ユーザーエクスペリエンスを向上させるために、最初に低解像度の画像を読み込んですぐに表示し、次にフェードアウトしてから、完全に読み込まれると高解像度の画像がフェードインしようとしています。低解像度の画像はすぐにレンダリングされますが、高解像度の画像はまだ表示されますちらついてからコンテナーに表示されます。画像の変更時に滑らかに見えません。
この問題を解決するにはどうすればよいですか? ユーザーエクスペリエンスを向上させるために実装できる解決策またはアイデアを提供してください。