理総研Webは、中学入試理科の暗記学習をA'n'Kingなどのデジタル教材でサポートする登録型eラーニングサイトです。
Name:
Pass:
理総研@中学受験専門:理科総合研究所
Front Page > Web Tech and Development Notes

理総研:技術情報と開発メモ

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>


著者 You Mizuguchi
  • PR
  • 理総研内ショートカット
  • 理総研セレクト
  • 投稿口コミ情報 (承認分)
> 報徳学園中学校
> 広島県立 広島叡智学園中学校
> 武蔵野女子学院中学校
> 横浜富士見丘学園中等教育学校
> 桐蔭学園中等教育学校
> 桐蔭学園中学校男子部
> 桐蔭学園中学校女子部
> ドルトン東京学園中等部
> 細田学園中学校
> 大阪市立 水都国際中学校
: 理科視点・中学校情報 :
  • ブログ投稿履歴
  • 現在のピクセルプラネット
Pixel Planet - piximage/rsk-1/2018-11-21.png
:: RSK-1の開拓史へ ::
  • 理総研について
中学入試理科の日々の暗記学習をA'n'King(アンキング)などのデジタル教材でサポートする、登録制無料コンテンツサイトです。
:: 詳しくはコチラ ::
理総研 :2011.02.03 設立
管理人 :水口 佑 / Cordu-Roy
お仕事 : フリープログラマー
:大手進学塾理科講師
:テレビドラゼミ講師