ページの読み込み後にjqueryコードを実行するにはどうすればよいですか?


88

ページでイベントを機能させる場合は、$(document).ready()関数内でイベントを呼び出す必要があります。DOMが読み込まれるとすぐ 、ページのコンテンツが読み込まれる前に、その中のすべてが読み込まれます。

ページのコンテンツが読み込まれたにのみJavaScriptコードを実行したいのですが、どうすればよいですか?

回答:


174

load代わりに使用ready

$(document).load(function () {
 // code here
});

更新.on()jQuery1.8以降 を使用する必要があります。(http://api.jquery.com/on/

$(window).on('load', function() {
 // code here
});

この答えから:

http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/によると:

非推奨のイベントエイリアスを削除しました

.load.unload、および.error、jQueryの1.8から非推奨、それ以上ではありません。.on()リスナーを登録するために使用します。

https://github.com/jquery/jquery/issues/2286


1
この回答のコメントから:stackoverflow.com/a/37817516/957246 $(window).on( "load"、function(){//ここにコード}); ..「。load」は非推奨であるため。
trapper_hag 2016

.on()を使用するのは明らかですが、これを見つける前に1時間かけて頭を壁にぶつけました。ありがとうございます。
ghuroo 2017

3
試し$(document).on('load', ...てみる間違いに気をつけてください$(window).on('load',...
ユーザー

29

以下

$(document).ready(function() { 
});

交換可能

$(window).bind("load", function() { 
     // insert your code here 
});

ページの読み込み時間を増やすために使用している方法がもう一度あります。

$(document).ready(function() { 
  $(window).load(function() { 
     //insert all your ajax callback code here. 
     //Which will run only after page is fully loaded in background.
  });
});

2
レディハンドラーのロードハンドラー?それは狂気です。その時点でウィンドウが存在し、それなしでハンドラーをアタッチできるため、ドキュメントを準備する必要はありません。
dalore 2015

20

誰もこれに言及しなかった

$(function() {
    // place your code
});

これはの省略関数です

$(document).ready(function() { .. });

16

編集:このコードは、すべてのコンテンツ(画像とスクリプト)が完全に読み込まれ、ブラウザーにレンダリングされるまで待機します。

私が使用し$(window).on('load',function(){ ... })Javascriptはフォーマットと要素の非表示を目的としていたため、コードの起動が速すぎるというこの問題が発生しました。非表示が早すぎて、高さが0のままになっている要素。

私は今使っ$(window).on('pageshow',function(){ //code here });ています、そしてそれは私が必要な時に発火します。


1
これも役に立ちました。jQueryMobileページが表示された後にコードを実行したかったのです。ありがとうございました。@Boyd Cyr
codedudey 2018年

受け入れられた回答と比較して、このコードがどれだけ役立つかを追加したかっただけです。どうもありがとう。
Countzero

10

この方法で「$」で未定義になるのを避けることができます

window.addEventListener("DOMContentLoaded", function(){
    // Your code
});

編集:ロード待機ページが完全にロードされ、imgが含まれているため、「DOMContentLoaded」の使用は「ロード」よりも高速です...一方、DomContentLoadedは構造のみを待機します


8

私は同じ問題を探しています、そしてここに私を助けるものがあります。これがjQueryバージョン3.1.0であり、loadイベントはjQueryバージョン1.8以降の使用が非推奨になっています。loadイベントはjQuery3.0から削除されます。代わりに、onメソッドを使用して、JavaScriptロードイベントをバインドできます。

$(window).on('load', function () {
  alert("Window Loaded");
});


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.