1

asp.nt ascx コントロールがそれぞれの window.onload のように、独自のクライアント側のロード イベントを持つことは可能ですか? そのため、読み込み div を非表示にして、http 転送が完了したときにコンテンツ div を表示できます。

ロードの進行状況を真剣に必要とする画像メニューとサイクル ギャラリーがありますが、それらを実装する方法がわかりません。サイトはhttp://techlipse.netです。事前にThx。

4

2 に答える 2

2

これを行うにはいくつかの方法があります。onloadページ上のすべてのコンテンツが完全に読み込まれるまでイベントがトリガーされないという事実を利用します。あなたのサイトはすでにjQueryを使用しているように見えるので、以下のすべての例ではそれを使用します。

ユーザーコントロールでは、デフォルトで非表示にすることができます。これを行うにはstyle、コントロールのラッパータグに属性を配置します。

<div style="display: none"> 
    <!-- Optionally you could use "visibility: hidden" 
         instead of "display: none". This will keep the 
         control's placeholder, but not physically show it to the user.
    -->
    <!-- Your control content here -->
</div>

コントロール内で、このようなJavaScriptコードを使用できます（jQueryがページの上部に含まれていると仮定します。これが現在のサイトの方法です）。これはあなたのコントロールに直接置かれます。

<script type="text/javascript">
$(window).load(function() { 
    $("#" + <%= this.ClientID %>).css("display", "block");
    // If you chose to use visibility, try the following line instead
    //$("#" + <%= this.ClientID %>).css("visibility", "visible");
});
</script>

これがどのように機能するかを説明するには...

ブラウザが最初にページをロードするとき、コントロールはデフォルトで非表示になっています。まったくレンダリングされません。jQueryload()はページのイベントをサブスクライブします。ロードイベントがトリガーされると、コントロールが表示されます。これは、すべての読み込みが完了した後にのみ発生します。

<div />このloadイベントで「loading...」を非表示にすることもできます。

もう1つのオプションは、実行している内容によってはより適切な場合がありますが、2つのメインdivを持つようにページを構造化することです。「読み込み」divと「コンテンツ」div。読み込み中のdivは、デフォルトで一般的な読み込みメッセージとともに表示されます。コンテンツdivは、デフォルトで非表示になります（または、以下の例のように、過度に非表示になります）。このonloadイベントにより、読み込み中のオブジェクトがページから削除され、画像を表示できるようになります。

以下の例では、読み込みが完了するまで、ページ全体に読み込みメッセージが表示されます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dynamic Loading Test</title>
    <style type="text/css">
    body {
        margin: 0px; 
        padding: 0px; 
        overflow: hidden/* Prevent user from scrolling. */
    }  /* Scrolling is re-enabled on load by JavaScript */
    .loadingBackground  {
        background: #000;
        filter: alpha(opacity=70); /* internet explorer */
        -khtml-opacity: 0.7;      /* khtml, old safari */
        -moz-opacity: 0.7;       /* mozilla, netscape */
        opacity: 0.7;           /* fx, safari, opera */
        height: 100%;
        width: 100%;
        position: absolute;
    }
    .loadingWrapper {
        position: absolute;
        top: 15%;
        width: 100%;
    }
    .loading {
        margin: 0 auto;        
        width: 300px;
        text-align: center;
        background: #ffffff;
        border: 3px solid #000;
    }

    </style>
    <script 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
        type="text/javascript"></script>
    <script type="text/javascript">
        $(window).load(function() {
            $('.loadingBackground, loadingWrapper, .loading').fadeOut('normal');
            $('body').css('overflow', 'auto');
        });
    </script>
</head>
<body>
<div class="loadingBackground"></div>
<div class="loadingWrapper">
<div class="loading">
Please Wait...<br />
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/30-1.gif" />
</div>
</div>
<!-- Large Images included to increase load time to show the loading effect -->
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3c/KillaryHarbour.jpg"
     style="height: 100%; width: 100%" />
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/Ireland_-_Plains_of_South_Kildare.jpg" 
    style="height: 100%; width: 100%" />
</body>
</html>
于 2009-08-01T23:33:52.973 に答える
0

load イベントにリスナーを追加できます... (イベントに直接結び付けないでください。別の結び付きが呼び出されない可能性があります)。

イベントをリッスンするのに役立つ JS ライブラリを使用してみてください。YUI、jQueryは楽しいものです。

http://developer.yahoo.com/yui/event/#start

var oElement = document.getElementById("myBody");
function fnCallback(e) { alert("i am loaded"); }
YAHOO.util.Event.addListener(oElement, "load", fnCallback);

YUI ライブラリには、エリアが「準備完了」したときにリッスンする方法があります

http://developer.yahoo.com/yui/event/#onavailable

待機するリスナーを用意して、div がいつロードされるかを確認し、実行時間の長いプロセスに ajax を送信することができます。

于 2009-07-31T13:10:20.567 に答える