Использование Jquery для открытия loading.gif

#jquery

Вопрос:

Какой самый простой способ реализовать загрузку страницы / loading.gif используя jquery, как и любые другие сайты.. Для этого нужно очистить страницу и показать loading.gif в середине, пока страница не загрузится.. Я не хочу записывать это на полпути вниз по странице, поэтому у него даже нет цели, я бы хотел, чтобы это загружалось первым делом на странице.. Есть ли способ, которым я могу это сделать, не записывая статические разделы на этой странице? Предпочтительно файл .js, который делает все это без какой-либо записи div / etc на страницу?

1. Конечно, это возможно. Что вы пробовали? «Как и любые другие сайты» не особенно полезно, поскольку сайтов сотни миллионов. Может быть, быть более конкретным?

2. вы имеете дело с действительно медленно загружающимися страницами или что-то в этом роде?

3. У меня есть div, который использует window.onload; но на этой странице фиксируется только около половины транзакции, я хочу захватить ее сверху.

Ответ №1:

Если вы имеете в виду, что когда ваш посетитель впервые загружает страницу, вы не получаете ничего, кроме вращающегося значка, пока страница не будет готова?

Что бы я сделал, разместив DIV в верхней части страницы с вашим загружаемым GIF-файлом, а другой разместил другой div вокруг содержимого страницы с помощью display:none на нем, который содержит основную часть страницы.

 <body>
  <div class='loadDiv'>
    <img src='spinner.gif' class='spinner_gif' />
  </div>
  <div class='mainContent' style='display:none;'>
    <p> stuff!</p>
  </div>
</body>

Затем в вашем событии загрузки DOM:

 $(document).ready(function() {
    $('.loadDiv').hide();
    $('.mainContent').show();
});

Это заставит ваш загрузочный div отображаться до тех пор, пока DOM не подтвердит, что страница готова.

1. Есть ли способ загрузить все это в файл .js без div?

2. Я признаю, что этот подход не так хорош, если вы должны учитывать, что у некоторых посетителей может не быть включен Javascript …

3. document.ready здесь не очень хороший вариант, скорее это должно быть onload , когда все остальные изображения и т.д. были загружены.

4. Проблема, как я вижу, в том, что если вы сделаете это в файле .JS, вам придется вставить HTML-элемент в начало страницы, а затем скрыть остальное содержимое, но поскольку это JS, вы не обязательно можете быть уверены, когда он вызывается, поэтомуможет не быть элемента DOM для вставки вашего загрузочного gif DIV. Если вы сможете это решить, ответ Эхтешама сделает это.

5. @Ehtesham, он использует jQuery и document. Ready таким образом идеально подходит для сокрытия некоторого содержимого после того, как dom закончит разбор документа; в конце концов, ему нужен счетчик только до завершения загрузки страницы; Onload этого не сделает.

Ответ №2:

Это одна из возможностей.

    window.onload = normalize;
   var laoding_img = $('<img src="loading.gif" />');
   $('body').children(':first').css('display', 'none'); //has to be some container that holds all html

   function normalize() {
       loading_img.remove();
       $('body').children(':first').css('display', 'block');
   }

в HTML

     <body>
        <script type="text/javascript">
             $('body').append(loading_img);</script>
    </body>