Question

我为我的朋友设计了以下网站：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而不是显示内容？

提前致谢。

Answer 1

使用内联样式

<body style="display:none">
</body>

Answer 2

使用类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);});

Answer 3

尝试有一个新版本的QueryLoader http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

Answer 4

将所有控件放在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>

Answer 5

您可以查看此网站..

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

您可以使用jquery hide和show ..

来完成此操作

如何隐藏和阻止在页面加载期间显示网页内容并改为显示动画gif图像

5 个答案: