ロード中だけ”NowLoading"とか表示するには？

[上に] [前に] [次に]
なべぷ [E-Mail] 1998/07/02(木) 23:41:25
JavaScriptで、ロード中だけ"Now Loading"ってなかんじで表示させるにはどうすればいいんでしょう？
ロード終了を知らせるイベントなんて無いし...
Flash使えば簡単にできるけど、なるべくPlugInとか指定したくないし。
もう 1998/07/03(金) 01:13:08
画像の読み込みが完了したかどうかなら、
document.image.complete
を使えばわかりますよ。
http://www.tohoho-web.com/js/document.htm#Image
に書いてあります。
テキストの方は・・・IE4なら、

<SPAN ID=LOADING STYLE="display:"><H1>Now Loading<H1></SPAN>

(テーブルなどの時間のかかるもの)

<SCRIPT LANGUAGE=JavaScript>
<!--
LOADING.style.display = "none";
// -->
</SCRIPT>

とすればできると思います。
NN/NCで使えるかどうかはわかりません。
では。
Aurai 1998/07/03(金) 07:35:41
＞ロード終了を知らせるイベントなんて無いし...
あれ、 onLoad は違いましたっけ？
Ywai [E-Mail] 1998/07/04(土) 17:00:28
以下の方法では、ページがロードされるまでの間、ドキュメント内に
"Now,Loading"のメッセージを表示します。NN/NC4,IE4対応です。
下位ブラウザでも表示させたいなら、ステータス行か、別フレームで
しょうか。onLoadイベント自体は NN2,IE3から使えます。

<HTML><HEAD>
<STYLE type="text/css"><!--
#loadmsg {position:absolute;font-size:20pt;color:red}
//--></STYLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function msgHide(){
if(parseInt(navigator.appVersion)<=3) return;
var loadmsg;
if(navigator.appName=="Netscape") loadmsg = document.layers.loadmsg;
else loadmsg = document.all.loadmsg.style;
loadmsg.visibility = "hidden";
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="msgHide()">
<SCRIPT LANGUAGE="JavaScript1.2"><!--
document.write("<DIV ID='loadmsg'>Now, Loading...</DIV>");
//--></SCRIPT>
</BODY></HTML>
なべぷ [E-Mail] 1998/07/05(日) 17:58:44
image.completeってのがあったんですねー。
それからLayerを使えばかっこよくできそうなんですけど、
業務でNN3で見れなくてはいけないのでだめなんです。
んで考え付いた方法は、
表示させたいページの前にNow Loadingって表示させるページを
用意して、そこで画像ファイルを先読みさせて、
読みこみが完了したら本来のページにジャンプする。
というものです。
とりあえず今のところはこれで動かしてます。
ちなみにonLoadはHTMLファイルの読み込みが完了したときであって、
そのページにある画像ファイルの読み込みは無視しちゃいます。
なべぷ [E-Mail] 1998/07/05(日) 18:06:27
[[解決]]
ちなみにさっきのページのソースはこんな感じです。
index.html
<HTML>
<HEAD>
<TITLE>Now Loading</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
    var preloadlist;
    var onImages = new Array();

    function preload(){
        if (document.images){
            preloadlist = new Array("news.gif",
                                    "theme.gif",
                                    "member.gif",
                                    "tool.gif",
                                    "gallery.gif",
                                    "logo.gif");
            for (field in preloadlist){
                onImages[field] = new Image();
                onImages[field].src = preloadlist[field];
            }
            jump2org_page();
        }else{
         location.href="main.html";
        }
    }

    function jump2org_page(){
        var readflag = true;

        for (field in preloadlist){
            if (onImages[field].complete == false){
                readflag = false;
                break;
            }
        }
        if (readflag){
            location.href = "main.html";
        }else{
            setTimeout("jump2org_page()", 1000);
        }
    }
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" onLoad="preload();">
<TABLE WIDTH="100%" HEIGHT="100%">
<TR><TD>
<CENTER>
<FONT COLOR="#ffffff">
Now Loading...
</FONT>
</CENTER>
</TD></TR>
</TABLE>
</BODY>
</HTML>
[上に] [前に] [次に]