случай 1:
Я загружаю очень большую HTML-страницу, которая включает в себя множество сложных макетов и шрифтов. Для отображения страницы потребуется некоторое неизвестное время.
случай 2:
Я использую функцию jquery .html(), чтобы внести существенные изменения в свой DOM. Для рендеринга измененного DOM потребуется некоторое неизвестное время.
В обоих случаях я хочу иметь возможность покрывать весь экран счетчиком, пока страница не полностью завершит рендеринг.
В поисках ответов на этот вопрос я нашел похожие вопросы, но ответы не имеют значения. Чтобы было ясно:
Я не хочу знать, когда DOM будет готов.
Я не хочу знать, когда были получены данные HTTP.
Я хочу знать, когда все в DOM будет полностью отображено на экране.
Установка тайм-аута в худшем случае не является приемлемым решением.
Мне нужно решение для браузеров на основе WebKit.
Ответ 1 · рейтинг 2 · GlennG
Просто маленькая точка; большинство браузеров не будут анимировать счетчик во время обработки javascript. В частности, IE, которые ведут себя очень однопоточно.
Для "спиннера" стоит использовать другой, не анимированный дизайн. Что-то вроде песочных часов.
Мысль о том, когда это вызовет проблему: почему бы не добавить что-нибудь после кода инициализации, который вы вызываете в своем событии $(document).ready. В случае с IE он должен срабатывать последним.
Ответ 2 · рейтинг 1 · Ian Oxley
Надеюсь, что-то вроде этого должно работать:
...
<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>
Ответ 3 · sdleihssirhc
Просто с моей головы, вы могли бы сделать что-то вроде этого:
var img_loaded;
$(lastImg).load(function () { img_loaded = true; });
(function checkLoading() {
return $(lastElement).css("lastProperty") === "value" && img_loaded ? stopLoading() : setTimeout(checkLoading, 50);
}());
Конечно, в этом много неправильного:
- Предполагается, что событие Image.onload работает как обычно (изображение полностью загружено и все такое). Если Safari "обманывает" window.onload, можем ли мы доверять им изображения?
- Предполагается, что последнее правило в файле CSS будет выполняться (и, следовательно, выполняться) последним. Я предполагаю, что если последним правилом является вес шрифта или что-то в этом роде, а предпоследним правилом является загрузка фонового изображения МБ, это тоже не сработает.
- Он требует постоянного внимания. Различные части должны быть обновлены для разных страниц. Как есть, он не масштабируется.
В статье, на которую вы ссылаетесь, говорилось только о Safari 3. Можем ли мы все еще не доверять загрузке Safari двумя версиями позже?
