ホームページ > 記事 > ウェブフロントエンド > JavaScriptのonloadとloadの違いは何ですか?
JavaScriptのonloadとloadの違いは何ですか?
- 青灯夜游オリジナル
- 2020-12-14 10:06:243704ブラウズ
違い:load はイベント メソッドを示すだけで、実行されません。onload は、ページ上のすべてをロードした後に実行されることを示します。onload 関数は 1 つしかないため、ページに表示できるのは 1 つだけですプログラマブル機能。 onload は一部の要素がロードされる前に実行される場合があり、load はすべての要素がロードされた後に実行されます。
関連する推奨事項: 「jQuery ビデオ チュートリアル 」
インタラクションを作成する場合、読み込み関数を onload にするか、onload にするかウールの布をロードしますか？
忘れないようにこの機会に整理してください。 ！
js の window.onload(function) は、jquery の $(window).onload(function) と同等です。
1: window.load はイベント メソッドを示すだけで、実行されません。たとえば、hover と click はイベントを表し、hover と onclick はそれらが実行される前に使用する必要があります。
通常、ページが読み込まれてレンダリングされるときに読み込み効果があり、この時点でそれを使用できます。時間:
JS:
$(window).load(function(){
$(".loadingicon").addClass("loader-chanage");
$(".loadingicon").fadeOut(300,function(){
$(".loadingicon").remove();
$(".maker").show().animate({"right":"0"},500);
});
})
$(window).load(function) ページ内の画像およびその他のリソースは、ロードされるまで実行されません。
2: window.onload は、読み込みが完了したことを意味します。ページ上のすべては、すべてが実行された後にのみ実行されます。プログラム可能な関数は 1 つだけであるため、ページ上に表示できる onload 関数は 1 つだけです:
JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo float</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){ alert("这是1");};
window.onload = function(){ alert("这是2");};
</script>
</body>
</html>
実行結果:
Three: 上記の話をした後、別の Jquery $(document).ready(function) があります。これは、Web ページ内のすべての DOM 構造が描画された後に実行されます。おそらく、DOM 要素に関連付けられたコンテンツ (画像や関連する高さと幅の設定など) が読み込まれていない可能性があります。この時点で、負荷を考慮することができます。これを回避するには、jquery のメソッドを使用します。さらに、$(document).ready(function) は、次のような関数を無制限に作成できます:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo float</title>
<script type="text/javascript" src="http://static.ruilife.net/static/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){ console.log("这是1");});
$(document).ready(function(){ console.log("这是2");});
</script>
</body>
</html>
実行結果:
4. document
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingp');
loadingMask.parentNode.removeChild(loadingMask);
}
}
最後にまとめると:
js: この関数は window.onload ページが実行されるとすぐに実行されます。この関数を実行すると、画像がページ内はまだ読み込まれていない可能性があります。
jquery: この関数は、$(window).load() ページ内の画像またはその他のものがロードされた後に実行されます。
load メソッドを呼び出す完全な形式は次のとおりです:load(url, [data], [callback]) パラメータはそれぞれ URL アドレス、ファイル タイプ (php、html など)、コールバック関数、およびセレクターの読み込みもサポートしていますload( "test.html #content id name")
プログラミング関連の知識の詳細については、プログラミング教育をご覧ください。 ！
以上がJavaScriptのonloadとloadの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。