HTML ページがロードされた後に js を実行する 2 つの方法

この記事では、HTML ページがロードされた後に特定の js を実行するための 2 つの方法を主に紹介します。必要な方は

js メソッドを参照してください:

コードをコピーします コードは次のとおりです。以下は jQuery メソッドです。jQuery ファイルを参照する必要があります。

コードをコピー

コードは次のとおりです:

<script type="text/javascript"> 
window.onload=function(){ 
var userName="xiaoming"; 
alert(userName); 
} 
</script>

またはその省略形

コードをコピー

コードは次のとおりです:

<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoming"; 

alert(userName); 
}); 

</script>

DOMがロードされるときに実行できます(window.onloadより前) ）。 .ready() は同じページ内に複数回表示できます

PS: 2 つの主な違い

window.onload:

window.onload イベントは、ドキュメントがブラウザに完全にダウンロードされた場合にのみトリガーされます。これは、ページ上のすべての要素が js に対して操作可能であることを意味します。つまり、ページ上のすべての要素は、ロードされるまで実行されません。この状況は、ロードの順序を考慮する必要がないため、関数コードを作成する場合に非常に有利です。 ,

$(document).ready{ }: DOM の準備が完了し、使用できるようになると、

が呼び出されます。これは、スクリプトからすべての要素にアクセスできることも意味しますが、関連するすべてのファイルがダウンロードされたことを意味するわけではありません。つまり、HMTL がダウンロードされ、DOM ツリーに解析された後にコードが実行されます。

例を挙げてみましょう:

ギャラリーを表すページがあるとします。この種のページには、jQuery を使用してこれらの画像を非表示にしたり、表示したり、その他の方法で操作したりできます。 onload ページを通じてインターフェイスを設定した場合、ユーザーはこのページを使用できるようになる前に、各イメージがダウンロードされるまで待つ必要があります。さらに悪いことに、デフォルトの動作を持つ要素 (リンクなど) に動作がわずかに追加されると、ユーザーの操作によって予期しない結果が生じる可能性があります。ただし、 $(document).ready(){ } をセットアップしようとすると、インターフェイスはより早く正しい動作で準備が整います。

$(document).ready(){ } を使用することは、onload イベント ハンドラーを試すよりも一般的に優れていますが、サポート ファイルがまだ完成していない可能性があるため、同様の画像の高さと幅などのプロパティが異なることは明らかです。現時点では有効ではない可能性があります。

注: ページの下部に js を配置し、defer="defer" を使用すると問題が発生します。上記の機能を使ったほうがいいですよ！

以上がHTML ページがロードされた後に js を実行する 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。