コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
ぺージロード時のスクリプト処理順序について | asp.net
- 2017/04/05
- 17:34
今回は asp.net におけるスクリプトのロード処理順番について検証してみました。
ロード時の処理は、window.load と jQuery と Ajax.Net の３種類ありますが、jQueryでは ready / load / function とさらに３種類に分かれます。これら５種類のロード時の実行順序について記載いたします。
前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降
１．実行順序
検証コード<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
window.onload = function () {
AlertOnPage("window.onload ");
}
//jQuery
$(function () {
AlertOnPage("jQuery function ");
});
$(window).load(function () {
AlertOnPage("jQuery load ");
});
$(document).ready(function () {
AlertOnPage("jQuery ready ");
});
//Ajax.Net独自Load処理
function pageLoad(sender, args) {
AlertOnPage("Ajax.Net pageLoad ");
}
//画面表示
function AlertOnPage(text) {
target = document.getElementById("main");
target.innerHTML += text + "＜br＞";
}
</script>
実行順序
（１）jQuery function
（２）jQuery ready
（３）Ajax.Net pageLoad
（４）window.load
（５）jQuery load
２．複数の実装について
一つのHTML（ASPX）ページに複数の同じ処理を実装した場合、 window.load や pageLoad では最後の記述が読み込まれ、jQuery では記述順に読み込まれるようです。検証コード
<script type="text/javascript">
window.onload = function () {
AlertOnPage("window.onload 1 ");
}
//jQuery
$(function () {
AlertOnPage("jQuery function 1 ");
});
$(window).load(function () {
AlertOnPage("jQuery load 1 ");
});
$(document).ready(function () {
AlertOnPage("jQuery ready 1 ");
});
//Ajax.Net独自Load処理
function pageLoad(sender, args) {
AlertOnPage("Ajax.Net pageLoad 1 ");
}
window.onload = function () {
AlertOnPage("window.onload 2 ");
}
//jQuery
$(function () {
AlertOnPage("jQuery function 2 ");
});
$(window).load(function () {
AlertOnPage("jQuery load 2 ");
});
$(document).ready(function () {
AlertOnPage("jQuery ready 2 ");
});
//Ajax.Net独自Load処理
function pageLoad(sender, args) {
AlertOnPage("Ajax.Net pageLoad 2 ");
}
//画面表示
function AlertOnPage(text) {
target = document.getElementById("main");
target.innerHTML += text + "＜br＞";
}
</script>
実行順序
（１）jQuery function 1
（２）jQuery ready 1
（３）jQuery function 2
（４）jQuery ready 2
（５）Ajax.Net pageLoad 2
（６）window.onload 2
（７）jQuery load 1
（８）jQuery load 2
実行順序から考えると、window.onload や pageLoad は複数の記述は避けるべきですね。コード自体が実行されず不具合の温床となります。
また、pageLoadは ScriptManager や UpdatePanel などの非同期処理コンポーネントを配置しないと実行されませんので、注意が必要です。
３．サンプルコード
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LoadTest.aspx.vb" Inherits="TreeViewTest.LoadTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Load Test</title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
window.onload = function () {
AlertOnPage("window.onload 1 ");
}
//jQuery
$(function () {
AlertOnPage("jQuery function 1 ");
});
$(window).load(function () {
AlertOnPage("jQuery load 1 ");
});
$(document).ready(function () {
AlertOnPage("jQuery ready 1 ");
});
//Ajax.Net独自Load処理
function pageLoad(sender, args) {
AlertOnPage("Ajax.Net pageLoad 1 ");
}
window.onload = function () {
AlertOnPage("window.onload 2 ");
}
//jQuery
$(function () {
AlertOnPage("jQuery function 2 ");
});
$(window).load(function () {
AlertOnPage("jQuery load 2 ");
});
$(document).ready(function () {
AlertOnPage("jQuery ready 2 ");
});
//Ajax.Net独自Load処理
function pageLoad(sender, args) {
AlertOnPage("Ajax.Net pageLoad 2 ");
}
//画面表示
function AlertOnPage(text) {
target = document.getElementById("main");
target.innerHTML += text + "＜br＞";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>
</div>
</form>
</body>
</html>
最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。
