3

私は友人のために以下のサイトをデザインしました: http://noorjamali.info/

Web ページの読み込み中に Web サイトのコンテンツを表示しないようにするにはどうすればよいですか? (ページ読み込み中の表示が悪い)。

1 - この目的のための jquery プラグインを紹介してください。その Web サイトでわかるように、私は次のように行動します。

CSS 

.Home_Page
{
    display: none;
}

jquery 

var $j = jQuery.noConflict();
$j(document).ready(function () {
    $j('.Home_Page').fadeIn(2000);
});

ただし、コンテンツはページの読み込み中に表示されます。

2 - この問題を解決するにはどうすればよいですか?
3 - ページの読み込み中にコンテンツを表示する代わりにアニメーション gif を表示するにはどうすればよいですか?

前もって感謝します。

4

5 に答える 5

2

インラインスタイルを使用し、

<body style="display:none">
</body>
于 2012-04-20T10:28:15.880 に答える
1

試してみてください QueryLoader の新しいバージョンがあり ます http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

于 2012-04-20T10:28:33.560 に答える
1

すべてのコントロールを UpdatePanel 内に配置し、更新パネルのトリガーを作成します。

Page_Load またはその他のページ イベントにデータ/コントロールをロードしないでください。代わりに、ページにデータ/コントロールをロードする関数を作成してください。

ページを空にします。クライアント側のページロード イベントに JavaScript を記述し、その JavaScript で更新パネル トリガーを呼び出します。サーバー側でトリガークリックにデータ/制御ロードコードを記述します。さらにいくつかの変更があります。サンプル コードを参照してください。

サンプルコード (aspx):

<asp:UpdatePanel ID="upD" runat="server">
    <ContentTemplate>
        <asp:PlaceHolder ID="ph" EnableViewState="False" runat="server">
        </asp:PlaceHolder>
        <asp:HiddenField ID="hdnIsPostBack" Value="0" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnLoadData" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="upr" runat="server" AssociatedUpdatePanelID="upD" DisplayAfter="50">
    <ProgressTemplate>
        <div id="Layer1" class="busy">
            <img alt="Loading Data" src="<%=PathPrefix %>/Images/loading.gif" /><br />
            Loading...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

<script type="text/javascript" language="javascript">

  var flag = false;
    function pageLoad() {
      if (!flag) {
        document.getElementById('m_c_btnLoadData').click();
        flag = true;
      }
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
        $get('m_c_upr').style.display = 'block';
    }
    function EndRequest(sender, args) {
        $get('m_c_upr').style.display = 'none';
    }
</script>
于 2012-04-20T10:37:39.540 に答える
1

class pageload などで div を作成します。この div にスタイルを指定します。

.pageLoad{
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1337; 
    width: 100%; 
    height: 100%; 
    background: #FFF url(loader.gif) no-repeat center center;
}

ページの読み込みが完了したら、この div を非表示にします

$(window).load(function(){$(".pageLoad").fadeOut(2000);});
于 2012-04-20T10:27:58.927 に答える
0

あなたはこのウェブサイトをチェックすることができます。

これは、ロードが完了していない場合でも実際にページを表示します。できることは、2つのDIVを作成することです。1つはメインページを含み、もう1つは準備中に表示される画像を含みます。

これは、jqueryのhideとshowを使用して行うことができます。

于 2012-04-20T10:41:03.800 に答える