回答:
これらのソリューションは機能します：
<body onload="script();">または
document.onload = function ...あるいは
window.onload = function ...ことを注意最後のオプションが行くには良い方法であることがあるので、unobstrusiveとされる多くの標準と考え。
document.onload=ない en.wikipedia.org/wiki/Unobtrusive_JavaScript
ロード時に実行する関数をスクリプトに設定させる、合理的に移植可能なフレームワークではない方法：
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;
}
}このイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、最初のHTMLドキュメントが完全に読み込まれて解析されたときに発生します。この段階で、ユーザーデバイスまたは帯域幅の速度に基づいて、画像とCSSの読み込みをプログラムで最適化できます。
DOMが読み込まれた後（imgとcssの前）に実行します。
document.addEventListener("DOMContentLoaded", function(){
//....
});注：同期JavaScriptは、DOMの解析を一時停止します。ユーザーがページをリクエストした後、DOMをできるだけ速く解析したい場合は、JavaScriptを非同期にして、スタイルシートのロードを最適化できます。
まったく異なるイベントであるloadは、完全に読み込まれたページを検出するためにのみ使用する必要があります。DOMContentLoadedの方がはるかに適切な場所でloadを使用することは非常によくある間違いであるため、注意が必要です。
すべてが読み込まれて解析された後に実行されます。
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リスト：
window.onload = ...スクリプトはすべてが完全にダウンロードされるまで待機してから実行されると考えてみましたが、window.onload実際にはのように動作しているようdocument.addEventListener("DOMContentLoaded", ...ですが、window.addEventListener("load", ...実際にはすべてが完全にダウンロードされるまで待機しています。私はそれがではなくwindow.onload同等であるはずだと思いましたか？ChromeとFFで同じ結果が得られました。window.addEventListener("load", ...document.addEventListener("DOMContentLoaded", ...
スクリプトが<head>ドキュメントの内に読み込まれている場合はdefer、scriptタグで属性を使用できます。
例：
<script src="demo_defer.js" defer></script>https://developer.mozilla.orgから：
延期する
このブール属性は、ドキュメントが解析された後、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>これはどこに置きますか？
</body>タグの直前（HTMLファイルの下部近く）のHTMLにコードを貼り付けます。
それは何をするためのものか？
このコードは、ドキュメント全体がロードされるのを待ってから、外部ファイルをロードすることを示しています
deferredfunctions.js。
これが上記のコードの例です-JSのレンダリングの延期
私はこれに基づいて書いたJavaScriptのdeferedロードなPageSpeed Googleの考え方も、この記事からソース延期ローディングのjavascript
フックdocument.onloadまたはjQueryを見てください$(document).load(...)。
ワーキングフィドルに<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><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
jQueryを使用している場合、
$(function() {...});
に相当
$(document).ready(function () { })
または別の短い手：
$().ready(function () { })
JQueryの$ function（）が起動するイベントを参照してください。およびhttps://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}ここを見てください：http : //msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
もっと複雑なページで、window.onloadが発生するまでにすべての要素が読み込まれていない場合があります。その場合は、関数が遅延する前にsetTimeoutを追加してください。エレガントではありませんが、うまくレンダリングできる単純なハックです。
window.onload = function(){ doSomethingCool(); };になる...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };<body onload="aFunction()">ページが読み込まれた後に呼び出されるように定義するだけです。スクリプト内のコードはで囲まれていaFunction() { }ます。
YUIライブラリの使用（大好きです）：
YAHOO.util.Event.onDOMReady(function(){
//your code
});ポータブルで美しい！ただし、他のものにYUIを使用しない場合（そのドキュメントを参照）、使用する価値はないと私は言います。
注意：このコードを使用するには、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
});$(window).on("load", function(){ ... });.ready（）は私に最適です。
$(document).ready(function(){ ... });.load（）は機能しますが、ページがロードされるまで待機しません。
jQuery(window).load(function () { ... });次のインラインスクリプトを壊します。他のjQueryフォークと一緒にjQuery 3.2.1も使用しています。
ウェブサイトの読み込みオーバーレイを非表示にするには、次を使用します：
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});注： -以下のマークアップは使用しないでください（他の同種の宣言を上書きするため）：
document.onreadystatechange = ...asnycページのロード後に外部スクリプトをロードするのに役立つスクリプトタグの属性を使用することをお勧めします
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>自己実行のonload関数を使用する
window.onload = function (){
/* statements */
}(); onloadこのアプローチを使用して、他のハンドラーをオーバーライドできます。代わりに、リスナーを追加する必要があります。