3

我为我的朋友设计了以下网站：http: //noorjamali.info/

如何防止在网页加载期间显示网站内容？（在页面加载期间它的视图不好）。

1 - 请您为此目的介绍一个 jquery 插件。正如您将在该网站上看到的那样，我的行为是这样的：

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

使用类页面加载或其他东西创建一个 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 回答
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 回答
0

你可以看看这个网站。。

即使加载未完成，这实际上也会显示页面。您可以做的是创建两个 DIV。一个包含主页，另一个包含准备时显示的图像。

您可以使用 jquery 隐藏和显示来做到这一点。

于 2012-04-20T10:41:03.800 回答