Как узнать, что HTML полностью отрендерился

случай 1:

Я загружаю очень большую HTML-страницу, которая включает в себя множество сложных макетов и шрифтов. Для отображения страницы потребуется некоторое неизвестное время.

случай 2:

Я использую функцию jquery .html(), чтобы внести существенные изменения в свой DOM. Для рендеринга измененного DOM потребуется некоторое неизвестное время.

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

В поисках ответов на этот вопрос я нашел похожие вопросы, но ответы не имеют значения. Чтобы было ясно:

Я не хочу знать, когда DOM будет готов.

Я не хочу знать, когда были получены данные HTTP.

Я хочу знать, когда все в DOM будет полностью отображено на экране.

Установка тайм-аута в худшем случае не является приемлемым решением.

Мне нужно решение для браузеров на основе WebKit.


html webkit jquery-ui html-rendering
person GroovyDotCom    schedule 21.12.2010    source источник
comment
Первое легко: используйте onload. Последнее, я не знаю, возможно ли это, интересно посмотреть, что получится.   -  person Pekka    schedule 21.12.2010
comment
С точки зрения юзабилити, охват всего экрана спиннером — это, по моему мнению, худшее, что вы можете сделать. Это просто заставит длинную загрузку казаться еще длиннее. Только мои 2¥. :о)   -  person deceze♦    schedule 21.12.2010
comment
Разве вы не можете просто добавить счетчик в базовый html, а затем скрыть счетчик после того, как весь javascript будет выполнен?   -  person Mark Baijens    schedule 21.12.2010
comment
onLoad также не выполняет работу в первом случае согласно: howtocreate.co.uk/safaribenchmarks .html   -  person GroovyDotCom    schedule 21.12.2010
comment
@Отметка. Вы упустили суть. скрытие счетчика после выполнения Javascript - это как раз проблема. JavaScript выполняется до завершения рендеринга/рисования страницы.   -  person GroovyDotCom    schedule 21.12.2010

Ответы (4)


arrow_upward
2
arrow_downward

Просто маленькая точка; большинство браузеров не будут анимировать счетчик во время обработки javascript. В частности, IE, которые ведут себя очень однопоточно.

Для «спиннера» стоит использовать другой, не анимированный дизайн. Что-то вроде песочных часов.

Мысль о том, когда это вызовет проблему: почему бы не добавить что-нибудь после кода инициализации, который вы вызываете в своем событии $(document).ready. В случае с IE он должен срабатывать последним.

person GlennG    schedule 29.12.2010
comment
Могу подтвердить это на своем опыте - вы находите красивый спиннер, а потом он просто зависает до загрузки страницы - большую часть времени. - person CodeVirtuoso; 04.01.2011

arrow_upward
1
arrow_downward

Надеюсь, что-то вроде этого должно работать:

...
<head>
  ...
  <style type="text/css">
    #overlay {
      background:url(../images/loading.gif) no-repeat 50% 50%;
      display:none;
    }
    .loading #overlay {
      display:block;
      left:0;
      height:100%;
      position:absolute;
      top:0;
      width:100%;
    }
    .loading > #overlay {
      position:fixed;
    }
  </style>
  <script>
    if (document.documentElement) {
      document.documentElement.className = 'loading';
    }
  </script>
</head>
<body>
  ..
  <div id="overlay">
    ..
  </div>
  <script>
    $(document).ready(function() {
      $('.loading #overlay').fadeOut(500,
        function() {
          $(document.documentElement).removeClass('loading');
          $('#overlay').remove();
        });
    });
</body>
</html>
person Ian Oxley    schedule 21.12.2010

arrow_upward
0
arrow_downward

Просто с моей головы, вы могли бы сделать что-то вроде этого:

var img_loaded;
$(lastImg).load(function () { img_loaded = true; });

(function checkLoading() {
    return $(lastElement).css("lastProperty") === "value" && img_loaded ? stopLoading() : setTimeout(checkLoading, 50);
}());

Конечно, в этом много неправильного:

  1. Предполагается, что событие Image.onload работает как обычно (изображение полностью загружено и все такое). Если Safari «обманывает» window.onload, можем ли мы доверять им изображения?
  2. Предполагается, что последнее правило в файле CSS будет выполняться (и, следовательно, выполняться) последним. Я предполагаю, что если последним правилом является вес шрифта или что-то в этом роде, а предпоследним правилом является загрузка фонового изображения МБ, это тоже не сработает.
  3. Он требует постоянного внимания. Различные части должны быть обновлены для разных страниц. Как есть, он не масштабируется.

В статье, на которую вы ссылаетесь, говорилось только о Safari 3. Можем ли мы все еще не доверять загрузке Safari двумя версиями позже?

person sdleihssirhc    schedule 21.12.2010

arrow_upward
0
arrow_downward

Для первого случая, я думаю, вы можете использовать:

<BODY onLoad="alert('Page Fully Loaded')">
person Syed Qarib    schedule 21.12.2010