Как я узнаю, когда HTML полностью отобразится - PullRequest
Новая
       19

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

7 голосов
/ 21 декабря 2010

дело 1:

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

дело 2:

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

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

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

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

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

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

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

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

Ответы [ 4 ]

2 голосов
/ 29 декабря 2010

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

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

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

1 голос
/ 21 декабря 2010

Как-то так должно работать: 

...
<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>
0 голосов
/ 21 декабря 2010

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

<BODY onLoad="alert('Page Fully Loaded')">
0 голосов
/ 21 декабря 2010

Прямо у меня на голове, вы можете сделать что-то вроде этого: 

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 двумя версиями позже?

...