ページの読み込み後に実行されるJavaScript
https://stackoverflow.com/questions/807878
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
<script>内の<head>を使用して、外部スクリプトを実行しています。
今では、ページがロードされる前に スクリプトが実行されるため、<body>などにアクセスできません。ドキュメントが<！> quot; loaded <！> quot;になった後にJavaScriptを実行したい（HTMLは完全にダウンロードされ、RAM内にあります）。ページの読み込み時にトリガーされる、スクリプトの実行時にフックできるイベントはありますか？
解決
これらのソリューションは動作します：
<body onload="script();">
または
document.onload = function ...
または偶数
window.onload = function ...
最後のオプションは、目立たないため、より良い方法です。 であり、より標準的であると考えられている。
他のヒント
ロード時に実行するようにスクリプトに関数を設定させる、合理的に移植可能な、フレームワークではない方法：
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
ページの読み込みには複数のステージがあることに注意してください。ところで、これは純粋なJavaScriptです
<！> quot; DOMContentLoaded <！> quot;
このイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、最初のHTMLドキュメントが完全に読み込まれて解析されたときに発生します。この段階では、ユーザーのデバイスまたは帯域幅の速度に基づいて、プログラムで画像とCSSの読み込みを最適化できます。
DOMがロードされた後（imgおよびcssの前）の実行：
document.addEventListener("DOMContentLoaded", function(){
//....
});
注：同期JavaScriptは、DOMの解析を一時停止します。 ユーザーがページをリクエストした後、DOMをできるだけ速く解析したい場合は、 JavaScriptを非同期にするおよびスタイルシートの読み込みを最適化
<！> quot; load <！> quot;
非常に異なるイベントである load は、完全にロードされたページを検出するためにのみ使用されるべきです。 DOMContentLoadedの方がはるかに適切な場所でロードを使用するのは非常によくある間違いですので、注意してください。
すべてがロードされ解析された後の実行：
window.addEventListener("load", function(){
// ....
});
MDNリソース：
https://developer.mozilla.org/en-US/ docs / Web / Events / DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web / Events / load
すべてのイベントのMDNリスト：
<！> quot; onload <！> quot;体内の属性
...<body onload="myFunction()">...
またはjQueryを使用している場合は、次のことができます
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
質問への回答を期待しています。
ドキュメントがページにレンダリングされた後に$（window）.loadが実行されることに注意してください。
スクリプトがドキュメントの<head>内にロードされている場合、scriptタグのdefer属性を使用できます。
例：
<script src="demo_defer.js" defer></script>
https：//developer.mozillaから。組織：
延期
このブール属性は、ブラウザにスクリプトが 文書が解析された後、しかし前に実行されることを意図しています DOMContentLoadedを起動します。
この属性は、src 属性が存在しない（つまり、インラインスクリプトの場合）、この場合は 効果がありません。
動的に挿入されたスクリプトに対して同様の効果を実現するには 代わりにasync = false。 defer属性を持つスクリプトは、で実行されます ドキュメントに表示される順序。
これは、ページのロード後の遅延jsロードに基づくスクリプトです
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
これをどこに配置しますか
HTMLの
</body>タグの直前（HTMLファイルの下部近く）にコードを貼り付けます。
それは何をしますか？
このコードは、ドキュメント全体がロードされるのを待ってからロードします 外部ファイル
deferredfunctions.js。
上記のコードの例- JSのレンダリングを延期
javascriptの遅延読み込み pagespeed googleコンセプトに基づいて作成しましたこの記事の javascriptの読み込みを延期
フックdocument.onloadまたはjQuery $(document).load(...)を見てください。
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
こちらをご覧ください： http：// msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Googleが推奨する最良の方法。 ：）
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
http://www.feedthebot.com/pagespeed/defer-loading- javascript.html
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
jQueryを使用している場合、
$(function() {...});
は
と同等です $(document).ready(function () { })
<body onload="myFunction()">
このコードはうまく機能します。
ただし、window.onloadメソッドにはさまざまな依存関係があります。そのため、常に機能するとは限りません。
window.onloadが起動されるまでにすべての要素がロードされているわけではない、より複雑なページで時々見つかります。その場合は、遅延する関数の前にsetTimeoutを追加してください。エレガントではありませんが、うまくレンダリングされる単純なハックです。
window.onload = function(){ doSomethingCool(); };
なる...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
ページをロードした後に呼び出される<body onload="aFunction()">を定義するだけです。スクリプト内のコードは、aFunction() { }で囲まれています。
$（window）.on（<！> quot; load <！> quot ;, function（）{...}）;
.ready（）が最適です。
$(document).ready(function(){ ... });
.load（）は機能しますが、機能しませんページがロードされるまで待ちます。
jQuery(window).load(function () { ... });
私には役に立たず、次のインラインスクリプトを壊します。また、jQuery 3.2.1を他のjQueryフォークと一緒に使用しています。
オーバーレイを読み込んでいるウェブサイトを非表示にするには、次を使用します：
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
YUIライブラリの使用（気に入っています）：
YAHOO.util.Event.onDOMReady(function(){
//your code
});
ポータブルで美しい！ただし、他のものにYUIを使用しない場合（ドキュメントを参照）、使用する価値はないと言います。
N.B。 ：このコードを使用するには、2つのスクリプトをインポートする必要があります
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
JavascriptまたはJqueryを使用して、ドキュメントが読み込まれたかどうかを検出します。
ネイティブJavascriptを使用してこれを実現できます
if (document.readyState === "complete") {
init();
}
これは間隔内でも実行できます
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);
switch (document.readyState) {
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}
Jqueryの使用 DOMの準備ができているかどうかのみを確認するには
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
すべてのリソースがロードされているかどうかを確認するには、window.loadを使用します
$( window ).load(function() {
console.log( "window loaded" );
});
このコードをjQueryライブラリで使用すると、これで問題なく動作します。
$(window).bind("load", function() {
// your javascript event
});
ダニエルが言うように、document.onloadを使用できます。
さまざまなjavascriptフレームワーク（jQuery、Mootoolsなど）はカスタムイベント「domready」を使用しますが、これはより効果的であると思われます。 javascriptを使用して開発している場合、フレームワークを活用することを強くお勧めします。生産性が大幅に向上します。
ページの読み込み後に外部スクリプトを読み込むのに役立つスクリプトタグにasnyc属性を使用することをお勧めします
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>
自己実行オンロード機能を使用
window.onload = function (){
/* statements */
}();
