Geek asks and answers

How to hide and prevent the contents of a web page from showing during page load and instead display an animated gif

I designed the site below for my friend: http://noorjamali.info/

How can I prevent the contents of a website from being displayed while the webpage is loading? (he has a bad idea while loading the page).

1 . Could you introduce me a jquery plugin for this purpose. As you will see on this website, I proceed as follows:

css

.Home_Page
{
    display: none;
}

jquery

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

but the content remains while the page loads.

2 . How can I fix this problem?
3 . How to show animated gif instead of showing content during page load?

Thanks in advance.

+3
5

,

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

div pageload - . 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);});
+1

UpdatePanel .

/ PageLLoad , / .

. javascript pagelload 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>
+1

..

, . , DIV. , , , .

jquery hide show..

0

More articles:


All Articles