Скрыть элементы, пока страница не завершит загрузку - используя jquery - PullRequest
Новая
       18

Скрыть элементы, пока страница не завершит загрузку - используя jquery

9 голосов
/ 13 сентября 2011

Я просто написал очень простой код, чтобы скрыть все элементы до тех пор, пока страница не завершит загрузку, и при загрузке не отобразится индикатор .. ( Работает ).

так что я прошу знать, правильно ли я делаю и что вы собираетесь предложить.

HTML 

<body>
    <div class="loading">
        <img src="indicator.gif"/>
    </div>

    <div class="content">
        <!-- page content goes here --> 
    </div>
</body>

JQuery 

$(document).ready(function(){
        $(".content").hide();
     });

    $(window).load(function(){
        $(".loading").fadeOut("slow");
        $(".content").fadeIn("slow");
     });

Ответы [ 2 ]

14 голосов
/ 13 сентября 2011

Вы, вероятно, хотите скрыть div с самого начала, чтобы избежать возможного мерцания страницы в зависимости от того, что загружается на странице. 

<body>
  <div class="loading">
    <img src="indicator.gif"/>
  </div>

  <div class="content" style="display: none;">
    <!-- page content goes here --> 
  </div>
</body>


$(window).load(function(){
  $(".loading").fadeOut("slow");
  $(".content").fadeIn("slow");
});
6 голосов
/ 18 февраля 2014

Небольшое улучшение в этом Javascript - это использование обратного вызова для постепенного исчезновения, так что постепенное появление начинается после завершения постепенного исчезновения. Это дает вам гораздо более плавный переход. 

<body>
  <div class="loading">
    <img src="indicator.gif"/>
  </div>

  <div class="content" style="display: none;">
    <!-- page content goes here --> 
  </div>
</body>


$(window).load(function(){
  $(".loading").fadeOut("slow", function(){
    $(".content").fadeIn("slow");
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...