logo标签列表

如何在页面加载时隐藏和防止显示网页内容，而是显示动画GIF图像

jquerycsspluginspreload
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而不是显示内容？

提前致谢。

5个回答
2

使用内联样式：

<body style="display:none">
</body>
1
1
创建一个类名为“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);});
不错的方式，但我有点担心高度：100％。 - SilverLight
@SilverLight - 我已经编辑过了，使用 bottom:0; right:0; 代替了显式的宽度和高度。 - Mikey
1

把所有的控制項都放在UpdatePanel中，並為該UpdatePanel創建一個觸發器。

不要在Page_Load或其他頁面事件上加載任何數據/控制項，而是在頁面上創建一個函數來加載數據/控制項。

讓頁面空白渲染。在客戶端pageload事件上編寫JavaScript並調用該JavaScript中的update panel觸發器。在觸發器點擊時在服務器端編寫數據/控制項加載代碼。這裡有一些更多的變化，參見範例代碼。

範例代碼（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>
0
你可以查看这个网站。 实际上，即使加载还没有完成，它也会显示页面。你可以创建两个DIV，一个包含主页，另一个包含在准备中显示的图像。 您可以使用jquery hide和show来实现这一点。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接