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

【问题标题】：How hide and prevent showing web page content during page load and show an animated gif image instead如何在页面加载期间隐藏和防止显示网页内容并显示动画 gif 图像
【发布时间】：2012-04-20 10:23:25
【问题描述】：

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

提前致谢。

【问题讨论】：

标签： jquery css plugins preload

【解决方案1】：

使用内联样式，

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

不错，但我有点担心身高：100%；
@SilverLight - 我已将其编辑为使用 bottom:0; right:0; 而不是使用显式宽度和高度。

【解决方案5】：

你可以看看这个网站..

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

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

【讨论】：