ページ上の要素が読み込まれるとすぐにアクションをトリガーしようとしています。私はこれを行うにはJqueryのon('load')の機能を使用しています。onLoadが要素に対して機能していません
ただし、動作しません。ここでは、コードとJSFiddle
console.log("Hi");
$('#complexDiv').on('load', function(){
console.log('Header loaded');
});
HTML
</header>
<body>
<h1>Hello!</h1>
<div id="complexDiv">
<h2>Some text</h2>
<p>A paragraph</p>
<img src="" alt="">
</div>
</body>
がある私はloadイベントが唯一の外部リソースを必要要素で呼び出されると信じています。 jQueryのより
：それは、すべてのサブ要素が が完全にロードされたとき
負荷イベントが要素に送られます。このイベントは、画像、スクリプト、フレーム、iframe、および ウィンドウオブジェクトのURLに関連付けられた任意の要素 に送信できます。
.ready用ケース（）：
JavaScriptが ページがレンダリングされたときにコードを実行するためのloadイベントを提供していますが、このイベントは画像などのすべての資産 までトリガされません。完了しました。ほとんどの場合、 スクリプトは、DOM階層が完全に に構築されるとすぐに実行され、そのためには.ready（）を使用できます。
あなたの状況に合わせて、負荷が非難されているため、ウィンドウの読み込みを聞くことができます。
$(window).on('load', function(){
console.log('Header loaded');
});
あなたは$(window)に添付animationstartイベント、.one()を使用し、0sにanimation-durationセットで#complexDiv要素に対してcssでanimationプロパティを定義することができます。
注：イベント属性は、クロム、クロム、jQueryなしで使用することができます.one(); firefox 47はonanimationstartイベントattirbuteを認識しませんでした。また、@keyframesはanimation-nameにcssと設定する必要がありますが、プロパティは設定する必要はありません。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>
<style>
#complexDiv {
animation: e 0s;
-moz-animation: e 0s;
-webkit-animation: e 0s;
}
@keyframes e {}
@-moz-keyframes e {}
@-webkit-keyframes e {}
</style>
<script>
$(window).one("animationstart", function(e) {
alert(e.target.id + " " + e.type)
console.log(e.target, e.type);
})
</script>
</head>
<body>
<h1>Hello!</h1>
<div id="complexDiv">
<h2>Some text</h2>
<p>A paragraph</p>
<img alt="" src="" />
</div>
</body>
</html>
ニーストリック、素晴らしいです –