次のコードを使用して、ページの読み込み後にいくつかのステートメントを実行しています。
<script type="text/javascript">
window.onload = function () {
newInvite();
document.ag.src="b.jpg";
}
</script>
しかし、このコードは正しく動作しません。一部の画像または要素が読み込まれている場合でも、関数が呼び出されます。私が望むのは、ページが完全にロードされた関数を呼び出すことです。
これはあなたのために働くかもしれません:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
またはjqueryに慣れている場合は、
$(document).ready(function(){
// your code
});
$(document).ready()DOMContentLoaded で発生しますが、このイベントはブラウザー間で一貫して発生していません。これが、jQuery がすべてのブラウザーをサポートするためにいくつかの強力な回避策を実装する可能性が高い理由です。これにより、プレーンな Javascript を使用して動作を「正確に」シミュレートすることが非常に困難になります (ただし、もちろん不可能ではありません)。
Jeffrey Sweeney と J Torres が示唆したsetTimeoutように、以下のような関数を起動する前に、関数を使用する方がよいと思います。
setTimeout(function(){
//your code here
}, 3000);
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 = ...
ページの読み込みが完了したこと、「DOM Load」または「Content Load」も意味することを少し混乱させていますか? HTML ページの読み込みでは、2 つのタイプのイベントの後にイベントを発生させることができます。
DOM ロード: DOM ツリー全体が最初から最後までロードされるようにします。ただし、参照コンテンツを確実にロードしないでください。タグによって画像を追加したとしimgます。このイベントにより、読み込まれたすべてimgの画像が適切に読み込まれたかどうかが確認されます。このイベントを取得するには、次のように記述します。
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
またはjQueryを使用して：
$(document).ready(function(){
// your code
});
After DOM and Content Load: DOM とコンテンツのロードも示します。タグだけでなくimg、すべての画像またはその他の関連コンテンツが読み込まれることも保証します。このイベントを取得するには、次のように記述します。
window.addEventListener('load', function() {...})
またはjQueryを使用して：
$(window).on('load', function() {
console.log('All assets are loaded')
})
jQuery を使用できる場合は、loadを参照してください。次に、要素の読み込みが完了した後に関数を実行するように設定できます。
たとえば、単純な画像を含むページを考えてみましょう:
<img src="book.png" alt="Book" id="book" />
イベント ハンドラーは画像にバインドできます。
$('#book').load(function() {
// Handler for .load() called.
});
現在のウィンドウのすべての要素をロードする必要がある場合は、次を使用できます
$(window).load(function () {
// run code
});
jQuery を使用できない場合、プレーンな Javascript コードは基本的に同じ量の (少ないとは言わないまでも) コードです。
window.onload = function() {
// run code
};
HTML ページで js 関数を呼び出したい場合は、onload イベントを使用します。onload イベントは、ユーザー エージェントが FRAMESET 内のウィンドウまたはすべてのフレームの読み込みを終了したときに発生します。この属性は、BODY 要素と FRAMESET 要素で使用できます。
<body onload="callFunction();">
....
</body>
window.onload = () => {
// run in onload
setTimeout(() => {
// onload finished.
// and execute some code here like stat performance.
}, 10)
}
すでに jQuery を使用している場合は、次の方法を試すことができます。
$(window).bind("load", function() {
// code here
});
ページの読み込みが完了した後に関数を呼び出し、タイムアウトを設定する
setTimeout(function() {
var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
for(var i, j = 0; i = ddl2.options[j]; j++) {
if(i.text == val) {
ddl2.selectedIndex = i.index;
break;
}
}
}, 1000);このjQueryを試してください：
$(function() {
// Handler for .ready() called.
});
body タグの完了後にスクリプトを配置します...動作します...