2017-02-28 10 views
0

私は、完全なサイトがロードされた後に呼び出されるイベントを使用しています。だから私はonload()を使っている。JavaScriptイベント - ページの読み込み中またはその前に?

サイトがロードされる前またはロードされている間、私の機能を呼び出す方法はありますか?

私は非常に感謝します! ありがとうございました!

+1

スクリプトタグに入れるだけです。 –

+0

そして私はどのように私の機能を呼び出すのですか? – Jan

+1

関数呼び出しを伴うscriptタグを先頭に置きます。しかし、それは機能に依存します。 onloadの前に起こるDOMContentLoadedもあります。 – dfsq

答えて

1
<html> 
    <head> 
    <title>My title</title> 
    <script> 
     var x = 2; 
     function timesTwo(num){ 
     return num * 2; 
     } 
     console.log(timesTwo(x)); 
    </script> 
    </head> 
    <body> 
    <h1>Hello World</h1> 
    </body> 
</html> 

JavaScriptコードは本体がレンダリングされているウェブサイト前に解釈して実行されているその方法を使用します。このアプローチを使用してJSを実行するとしばらく時間がかかると、ウェブサイトの表示時間が同じ量だけ遅れることに注意してください。

0

可能な限り早く呼び出す場合は、<head>要素の先頭にあるスクリプトタグに記述します。ただし、ライブラリがロードされていることや、ページがまだロードされていないことを保証することはできません。 jqueryを使用して、できるだけ早く何かをしたい場合は、$(function() { yourFunctionHere() })を使用してください。あなたはjqueryのを使用していない場合は、DOMContentLoadedイベントに

0

あなたは 'readystate'イベントを聞いて、 'DOMContent'イベントの前に何かをすることができます。スニペットを頭のタグに入れておくことを忘れないでください。

<html> 
 
<head> 
 
<script> 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    console.log('DOM content loaded'); 
 
}; 
 
document.addEventListener('readystatechange', function() { 
 
    console.log('[Ready state is]', document.readystate); 
 
    if (document.readystate != 'complete') { 
 
     console.log('You can do something here'); 
 
    } 
 
}; 
 
</script> 
 
<body> 
 
</body> 
 
</html>

出力が可能:

[Ready state is] interactive 
You can do something here 
DOM content loaded 
[Ready state is] complete 

それがお役に立てば幸いです。

関連する問題