Как скрыть и предотвратить отображение содержимого веб-страницы во время загрузки страницы и вместо этого показывать анимированное изображение в формате GIF

Я разработал сайт ниже для своего друга: 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 вместо отображения содержимого во время загрузки страницы?

Заранее спасибо.


plugins jquery css preload
person SilverLight    schedule 20.04.2012    source источник

Ответы (5)


arrow_upward
2
arrow_downward

использовать встроенный стиль,

<body style="display:none">
</body>
person ilyes kooli    schedule 20.04.2012

arrow_upward
1
arrow_downward

Попробуйте Существует новая версия QueryLoader http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

person Sujith Kumar KS    schedule 20.04.2012

arrow_upward
1
arrow_downward

Поместите весь свой контроль в 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>
person Imran Rizvi    schedule 20.04.2012

arrow_upward
1
arrow_downward

Создайте 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);});
person sneeky    schedule 20.04.2012
comment
хороший способ, но я немного беспокоюсь о высоте: 100%; - person SilverLight; 20.04.2012
comment
@SilverLight - я отредактировал его, чтобы использовать bottom:0; right:0; вместо явной ширины и высоты. - person Mikey; 20.04.2012

arrow_upward
0
arrow_downward

Вы можете проверить этот веб-сайт..

Это фактически показывает страницу, даже если загрузка не завершена. Что вы можете сделать, так это создать два DIV. Один содержит главную страницу, а другой содержит изображение, которое отображается, пока вы готовитесь.

Вы можете сделать это, используя jquery hide and show..

person Sandeep Rao    schedule 20.04.2012