時間帯に応じて異なる画像を表示したいページがあります。
これがどのように機能するようになったかは、jquery 対応リスナーにアタッチされていることです。すべての画像要素を選択し、時間に基づいてソースを変更する関数があります。各 img タグには、ユーザーが js を無効にした場合などに備えて、html で指定されたデフォルトの src があります。
ただし、この方法では、ブラウザがデフォルトの画像の読み込みを開始してから、時間固有の画像の読み込みに進むため、不必要なオーバーヘッドが発生するのではないかと心配しています。
だから私の質問はこれです: jquery ready イベントで img ソースを変更すると、ブラウザが画像の読み込みを開始する前に img src が変更されますか?
すべての応答に感謝します。これが重複した質問である場合は申し訳ありませんが、jquery Ready イベントのニュアンスに関して何百万もの質問があります。
すべてのhtmlが読み込まれるとすぐにreadyリスナーが実行を開始すると思います。つまり、bgが読み込まれるのを待たずにreadyが実行されます。したがって、タイミングによっては、デフォルトのロードを行ってから切り替えることができます。
おそらく、画像の src または bg の css を省略して、ready() で jquery を使用してのみ追加できます。
js を無効にしている場合は、noscript ブロックでデフォルトのロードを行うことができます
この権利に対する答えは、jQuery のドキュメントにあります。
JavaScript は、ページのレンダリング時にコードを実行するためのロード イベントを提供しますが、このイベントは、画像などのすべてのアセットが完全に受信されるまでトリガーされません。ほとんどの場合、スクリプトは DOM 階層が完全に構築されるとすぐに実行できます。
したがって、コードがそこにあると、画像の読み込みステータスに関係なく、ready イベントの実行が開始されます。これは、画像が表示されているかどうか、完全にまたは部分的に読み込まれている可能性があることを意味します。これは、画像を変更するコマンドが受信される前に画像が読み込まれる速度に依存します。
画像がロードされないことを完全に確実にしたい場合は、必要な画像だけがコードに書き込まれるように、サーバー側でこれを行う必要があります。変更の実行に遅延があった場合は、デフォルトの画像のすべてまたは一部が確実に表示されます。