jQuery $（ウィンドウ）.loadが期待どおりに動作しない

Question

以前はアセットパイプラインにロードされていた機能の一部を削除するときに、 Bテスト。

私はbigVideo.jsライブラリを使用して、ページにフルスクリーンビデオを読み込んでいます。 BigVideo.jsは、部分的にコードを抽出したときに、間違った次元の読み込みを開始しました。部分的な負荷は、JavaScriptの残りの部分の下にあります。

私はこれまで、通常の資産パイプライン内の無名関数でコードをカプセル化していました。 （ワーキング）

オリジナルコード

$(function() { 
    (function() { 
    var bgVid = new $.BigVideo({useFlashForFirefox: false}) 
    bgVid.show('http://videourl.com', { ambient : true }); 
    }(); 
}); 

次に、私は部分的にそれを呼び出すことができるように、この同じ変数を設定しようとしました。動画が正しいサイズを使用せずに読み込みを開始しました。

部分で

$(function() { 
    var initVid = function() { 
    var bgVid = new $.BigVideo({useFlashForFirefox: false}) 
    bgVid.show('http://videourl.com', { ambient : true }); 
    }; 

：

$(function() { 
    initVid(); 
}); 

何かが完全にロードしないDOMの寸法で起こっていたようにそれは見えたので、私はこのような何かに関数を切り替え を試してみました：

部分的に：

$(window).load(function() { 
    var bgVid = new $.BigVideo({useFlashForFirefox: false}); 
    bgVid.show('http://videourl.com', { ambient : true }); 
}); 

まだ運がありません。

は最後に、私はそれが動作window.onload

window.onload = function() { 
    var bgVid = new $.BigVideo({useFlashForFirefox: false}) 
    bgVid.show('http://videourl.com', { ambient : true }); 
}; 

を使用してに頼っ！では、window.onloadが正常に動作しているように見えるのに、$（window）.loadがここで失敗するのはなぜですか？

Answer 1

あなたはDOMの準備ができていることを確認にするために使用できるいくつかの異なるイベントがあります。

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

は

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

と同じで、HTMLドキュメントがロードされたときに実行されるが。他の手からあなたにもだけでなく、HTMLドキュメントがロードされたとき、後に起こる、だけでなく、画像やスタイルなどのすべてのリンクされたリソース

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

のdeprecated同等である

$(window).load(function() { ... }); 

を使用することができます。あなたが読むことのできる違いの詳細についてはhereをご覧ください。

最近のブラウザでは、document.ondomcontentreadyを使用するオプションがあります。これは、非標準のdocument.readyがjQueryによって追加されたのと同等です。

私にとっては、いったんjQueryのようなツールを手に入れれば、さまざまなブラウザの動作とイベントの互換性に問題はありません。 を使用して、2度は考えないでください。