私は現在、ページのヘッダーにある JavaScript がいつ実行されるのか自問自答しています。
すべてのコンテンツがロードされた後ですか？画像の読み込み中？サイトをロードする前に？
理由は、ユーザーが JavaScript を使用せずにサイトにアクセスするのを防ぐためのバリアを実装したいからです (社内で使用するためのものです。要件について私を責めないでください) - 私の考えは、JavaScript で隠されている div-error-message を作成することでしたまた、私のページのスクリーンショットはグレー表示され、javascript が無効になっていると非表示になります。
問題は、このようなスクリーンショットは、ファイル サイズに関して非常に大きくなる可能性があることです。接続が遅い場合、javascript が画像を非表示にする前に、画像全体をロードする必要がありますか?!
「JavaScript が必要です」という警告を<noscript>タグ内に入れてみませんか?
<script>HTML ページの内の タグは、<head>読み込まれるときに (属性が設定されていない限りdefer)、つまり、画像やドキュメントの残りの部分が読み込まれる前に実行されます。あなたがしたいことは、隠したい画像を<div id="something" style="display:none">含めて、ページとそのすべてのコンテンツ（スクリーンショット画像を含む）がロードされた後にこのdivを表示することです（つまり、onloadハンドラーで-または明らかにaddEventListenerを使用できますそれも）。
チッ！
タグ内の Javascript はscript、ブラウザに表示されるたびに実行されます。しかし、他のすべての実行と (おそらく) ダウンロードを停止します。imgで を非表示にしようとしていますがbody、scriptタグが含まれているためhead、 がロードされる前に実行imgされ、見つけることができません (document.getElementById('#noScriptImage')失敗します)。
別のオプションは、scriptタグを の後に配置するimgことですが、その場合、ほんの一瞬だけ画像が表示され、画面がフリックするという変更があります。
JavaScript は、使用しているイベントによって異なります。onload イベントについて話している場合は、すべてのコンテンツが読み込まれた直後に実行されます。
問題を処理するには、ページを作成し、そこに JavaScript を記述して JavascriptEnabled.html にリダイレクトすることができます。リダイレクトできない場合は、META REFRESH タグを追加して JavascriptDisabled.html にリダイレクトし、警告メッセージを表示する必要もあります。