ブラウザーのサイズに基づいて、読み込む適切な画像が JavaScript によって決定されるページを作成しようとしています。例えば:
<img src="image1.jpg" />
JavaScriptはそれを次のように変更します:
<img src="image1_800px.jpg" />
800px 幅の画像バージョンをロードします。
これを行うことは問題ではありません。JavaScript を使用しないブラウザで同じことをしようとすると、問題が発生します。基本的な考え方は、最初は画像を非表示にして、NOSCRIPT タグのスタイルで表示することです。そのため、JavaScript をサポートするブラウザーは画像の URL を変更してそれらの画像を表示し、JavaScript をサポートしないブラウザーは css によってそれらの画像を再表示します。問題は、display:none の画像がブラウザによって読み込まれることです。また、画像のURLをsrc属性以外に追加することはオプションではありません。そのような画像はjavascriptに依存してsrcを設定するからです。
これを機能させることが可能であれば、何かアイデアはありますか?
例: domready で画像の src 属性を書き換えて、ブラウザが古い src から画像の読み込みを開始しないことを期待できますが、そうでしょうか? もしそうなら - それは常にそうですか、それとも一部のブラウザは異なって動作しますか?