[TROUBLE 61] JavaScriptで切り替える画像が一瞬表示されない状態になる | デザインってオモシロイ -MdN Design Interactive-

[TROUBLE 61] JavaScriptで切り替える画像が一瞬表示されない状態になる

2024.4.20 SAT

【サイトリニューアル!】新サイトはこちらMdNについて

日々のデザイン現場で発生する問題・難題を解決します!

WEB制作トラブル速戦即決術! 第12回


[TROUBLE 61]
Javaトラブル
JavaScriptで切り替える画像が
一瞬表示されない状態になる

文=H2O Space.

A. プリロード処理をして読み込ませておく

JavaScriptで画像を切り替える上図のようなプログラムの場合、速度の問題で一瞬画像が表示されないことがある。そのようなときは下図のようにあらかじめ読み込ませておこう。

元のソース。ネット上に配置し、遅い回線で試すと画像の表示が一瞬遅れる
元のソース。ネット上に配置し、遅い回線で試すと画像の表示が一瞬遅れる

改良案。Imageオブジェクトを生成して、あらかじめ読み込ませている
改良案。Imageオブジェクトを生成して、あらかじめ読み込ませている

[INDEX]
>>> [TROUBLE 61] JavaScriptで切り替える画像が一瞬表示されない状態になる
>>> [TROUBLE 62] Firefoxでスクロールバーが出るときと出ないときがある
>>> [TROUBLE 63] PHPのコンテンツで文字化けが発生してしまう
>>> [TROUBLE 64] IE 6やIE 7で自作のJavaScriptの実行速度が遅く感じる
>>> [TROUBLE 65] メールで送れない大きなデータを今すぐ渡さないといけなくなった
>>> [TROUBLE 66] IE 6でレイアウトが崩れ標準モードにならない



『web creators』の情報はこちら!>>>

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在