関連項目⇒
TIME、CSS、JavaScriptをフルに使用したカッコイイページの読み込み中表示です。インラインフレームを使用して表示しています。合計2ページの編集が必要になりますので注意して下さい。
まず、下記ソースをコピーし、「loading.htm」として保存して下さい。
まず、下記ソースをコピーし、「loading.htm」として保存して下さい。
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>Now Loading.....</TITLE>
<STYLE type="text/css">
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<div id="div1" style="display:block;position:absolute;top:0;left:0;z-index:100;width:105%;height:100%;">
<TABLE style="position:relative;top:0;left:0;width:100%;height:100%; filter:progid:DXImageTransform.Microsoft.Gradient();color:white;font-size:15;text-align:center;">
<TR>
<TD align="center">只今ダウンロードしています。しばらくお待ちください・・・・・・<BR><BR>
<SPAN style="font-size:24;font-family:Arial;">Now Loading...</SPAN>
</TD></TR></TABLE>
<t:transitionFilter id="t0" targetElement="div1" TYPE="clockWipe" BEGIN="0;t0.end+1" SUBTYPE="clockwiseTwelve" DUR="2" MODE="in" FROM="0.0" TO="1.0" CALCMODE="linear" />
</div>
</BODY>
</HTML>
<HEAD>
<TITLE>Now Loading.....</TITLE>
<STYLE type="text/css">
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<div id="div1" style="display:block;position:absolute;top:0;left:0;z-index:100;width:105%;height:100%;">
<TABLE style="position:relative;top:0;left:0;width:100%;height:100%; filter:progid:DXImageTransform.Microsoft.Gradient();color:white;font-size:15;text-align:center;">
<TR>
<TD align="center">只今ダウンロードしています。しばらくお待ちください・・・・・・<BR><BR>
<SPAN style="font-size:24;font-family:Arial;">Now Loading...</SPAN>
</TD></TR></TABLE>
<t:transitionFilter id="t0" targetElement="div1" TYPE="clockWipe" BEGIN="0;t0.end+1" SUBTYPE="clockwiseTwelve" DUR="2" MODE="in" FROM="0.0" TO="1.0" CALCMODE="linear" />
</div>
</BODY>
</HTML>
関連項目⇒
次にページの読み込み後に表示したいページを下記のように編集します。
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>Now Loading.....</TITLE>
<SCRIPT language="JavaScript">
<!--
var doc = '<IFRAME id="if1" src="loading.htm" scrolling="no" margin="0" frameborder="0" border="0" align="top" style="position:relative;top:0;left:0;width:100%;height:100%;"></IFRAME>';
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
div1.style.display = "none"
tbl1.style.display = "block"
}
-->
</SCRIPT>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY onload="nowLoading()">
<DIV id="div1" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;"></DIV>
<SCRIPT language="JavaScript">
<!--
div1.innerHTML=doc;
-->
</SCRIPT>
<TABLE id="tbl1" style="display:none;width:100%;height:100%;" cellpadding="0" cellspacing="0" border="0">
<TR>
<TD>
<!--この下にロード後表示させたい内容を書きます。-->
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<HEAD>
<TITLE>Now Loading.....</TITLE>
<SCRIPT language="JavaScript">
<!--
var doc = '<IFRAME id="if1" src="loading.htm" scrolling="no" margin="0" frameborder="0" border="0" align="top" style="position:relative;top:0;left:0;width:100%;height:100%;"></IFRAME>';
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
div1.style.display = "none"
tbl1.style.display = "block"
}
-->
</SCRIPT>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY onload="nowLoading()">
<DIV id="div1" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;"></DIV>
<SCRIPT language="JavaScript">
<!--
div1.innerHTML=doc;
-->
</SCRIPT>
<TABLE id="tbl1" style="display:none;width:100%;height:100%;" cellpadding="0" cellspacing="0" border="0">
<TR>
<TD>
<!--この下にロード後表示させたい内容を書きます。-->
</TD>
</TR>
</TABLE>
</BODY>
</HTML>