中学受験専門 理科総合研究所 −理総研−
004：ページをすべて読み込んでから、最後にコードを実行対象言語：JavaScript / jQuery
|
|
| キーワード：JavaScript jQuery onLoad ページ 読み込んでから 最後に 実行 関数 function | |
|
JavaScriptのライブラリ集であるjQueryが導入されている場合、jQuery APIのloadイベントに関数をバインドすることで、ページ内容をすべて読み込んでから特定のコードを実行させることができます。
$(window).load(function(){
理総研ではユーザーがログイン中に、ページ右上の「INFO」で様々な情報・お知らせをニュース・ティッカーとして流しています。
ページがロード中にニュース項目がリストで表示されてしまうと管理人の気分が萎えてしまうので、あらかじめニュース項目のブロック要素をdisplay:none;にしておき、ページのロードが完了したらdisplay:block;に変える仕様になっています。
以下は、理総研で実際に使用しているコードです。
・・・処理・・・ }); |
|
<head>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#news").css("display", "block");
// id="news"となっているブロックを"非表示"から"表示"に変える。
});
</script>
</head>
<body>
<div id="news" style="display:none;">ニュース項目</div>
</body>
|
