Ненавижу, как вы можете видеть загрузку веб-страниц. Я думаю, было бы гораздо интереснее подождать, пока страница будет полностью загружена и готова к отображению, включая все сценарии и изображения, а затем отобразит ее браузер. Поэтому у меня есть два вопроса...
Заранее благодарим за вашу мудрость!
Это очень плохая идея для всех приведенных причин и многое другое. Тем не менее, здесь, как вы это делаете, используя jQuery:
<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#body').show();
$('#msg').hide();
});
</script>
</body>
Если у пользователя отключен JavaScript, он никогда не видит страницу. Если страница никогда не заканчивает загрузку, они никогда не видят страницу. Если страница занимает слишком много времени, чтобы загрузить, они могут предположить, что что-то пошло не так, и просто пойти куда-то в другом месте, а не * пожалуйста, подождите... * ing.
Я думаю, что это действительно плохая идея. Пользователям нравится видеть прогресс, простой и простой. Сохранение страницы в одном состоянии в течение нескольких секунд, а затем мгновенное отображение загруженной страницы заставит пользователя почувствовать, что ничего не происходит, и вы, вероятно, потеряете визиты.
Один из вариантов - показать статус загрузки на вашей странице, в то время как процессы обработки в фоновом режиме, но это обычно зарезервировано для того, когда сайт фактически выполняет обработку на входе пользователя.
http://www.webdeveloper.com/forum/showthread.php?t=180958
В нижней строке вам, по крайней мере, нужно показать какую-то визуальную активность, пока страница загружается, и я думаю, что загрузка страницы небольшими кусочками за раз не так уж плоха (если вы не делаете что-то серьезное замедляет загрузку страницы).
Здесь решение с использованием jQuery:
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
Я помещаю этот script сразу после тега </body>. Просто замените "#container" на селектор для элементов (ов) DOM, которые вы хотите скрыть. Я попробовал несколько вариантов этого (в том числе .hide()/.show() и .fadeOut()/.fadeIn()), и просто установка непрозрачности, кажется, имеет наименьшее количество негативных эффектов (мерцание, изменение высоты страницы и т.д.). Вы можете также заменить css('opacity', 0) на fadeTo(100, 1) для более плавного перехода. (Нет, fadeIn() не будет работать, по крайней мере, не под jQuery 1.3.2.)
Теперь оговорки: я реализовал выше, потому что я использую TypeKit, и там возникает раздражающее мерцание, когда вы обновляете страницу, а шрифты занимают несколько сотен миллисекунд для загрузки. Поэтому я не хочу, чтобы текст отображался на экране до тех пор, пока не загрузится TypeKit. Но, очевидно, у вас большие проблемы, если вы используете код выше, и что-то на вашей странице не загружается. Существует два очевидных способа улучшения:
Я не буду беспокоиться об использовании индикатора загрузки здесь, но ограничение времени очень просто. Просто добавьте это в script выше:
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
Итак, в худшем случае на вашей странице появится дополнительная секунда.
Разумеется, для этого существует правильное использование. Один из них - запретить людям нажимать на ссылки/вызывать события JavaScript до тех пор, пока не будут загружены все элементы страницы и JavaScript.
В IE вы можете использовать переходы страниц, что означает, что страница не отображается до полной загрузки:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />
Обратите внимание на короткую продолжительность. Этого достаточно, чтобы убедиться, что страница не отображается до полной загрузки.
В FireFox и других браузерах решение, которое я использовал, - это создать DIV, который является размером страницы и белым, а затем в самом конце страницы помещается в JavaScript, который скрывает Это. Другой способ - использовать jQuery и скрыть его. Не так безболезненно, как решение IE, но оба хорошо работают.
Также убедитесь, что сервер выполняет буферизацию страницы и не сразу (при ее создании) передает ее в клиентский браузер.
Поскольку вы не указали свой стек технологий:
обязательный: "использовать jQuery"
Я видел страницы, которые помещают черный или белый div, который покрывает все поверх страницы, а затем удаляет его на событие document.load. Или вы могли бы использовать .ready в jQuery Как говорится, это была одна из самых анонимных веб-страниц, которые я когда-либо видел, я бы посоветовал ей.
Хотя это не всегда хорошая идея, вы можете решить, хотите ли вы это сделать. Есть несколько способов сделать это, и я нашел здесь простой пример:
http://www.reconn.us/content/view/37/47/
Вероятно, не самый лучший, но он должен помочь вам разработать собственное решение. Удачи.
Сразу после вашего тега <body> добавьте что-то вроде этого...
<style> body {opacity:0;}</style>
И для самого первого в вашей <head> добавить что-то вроде...
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
Насколько это хорошо или плохо, зависит от ваших посетителей и времени ожидания.
Вопрос, который остается открытым, и я не вижу никаких ответов здесь, как убедиться, что страница стабилизировалась. Например, если вы загружаете шрифты, страница может оплатить бит до тех пор, пока все шрифты не будут загружены и не отображены. Я хотел бы знать, есть ли событие, которое сообщает мне, что страница выполнена рендерингом.
Вы можете скрыть все, используя css:
#some_div
{
display: none;
}
а затем в javascript назначьте функцию document.onload для удаления этого div.
jQuery делает такие вещи очень легкими.
В дополнение к Тревору Бернему ответ, если вы хотите иметь дело с отключенным javascript и отложить загрузку css
HTML5
<html class="no-js">
<head>...</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
CSS
//at the beginning of the page
.js main, .js footer{
opacity:0;
}
JAVASCRIPT
//at the beginning of the page before loading jquery
var h = document.querySelector("html");
h.className += ' ' + 'js';
h.className = h.className.replace(
new RegExp('( |^)' + 'no-js' + '( |$)', 'g'), ' ').trim();
JQUERY
//somewhere at the end of the page after loading jquery
$(window).load(function() {
$('main').css('opacity',1);
$('footer').css('opacity',1);
});
Ресурсы
Пока я согласен с другими, что вы не должны этого хотеть, я просто кратко объясню, что вы можете сделать, чтобы сделать небольшую разницу, не пройдя весь путь и фактически заблокировав контент, который уже существует, - может быть, этого будет достаточно чтобы вы и ваши посетители были счастливы.
Браузер начинает загрузку страницы и будет обрабатывать внешние ссылки css и js позже, особенно если место, где css/js связано, находится в "правильном" месте. (Я думаю, совет состоит в том, чтобы загрузить js как можно позже и использовать внешний CSS, который вы загружаете в заголовок). Теперь, если у вас есть часть ваших css и/или js, которые вы хотели бы применить как можно скорее, просто включите это на самой странице. Это будет противоречить рекомендациям таких инструментов производительности, как YSlow, но, вероятно, это увеличит изменение вашей страницы, как показано на рисунке. Используйте это только тогда, когда это действительно необходимо!
в PHP-Fusion Open Source CMS, http://www.php-fusion.co.uk, мы делаем это так в ядре -
<?php
ob_start();
// Your PHP codes here
?>
YOUR HTML HERE
<?php
$html_output = ob_get_contents();
ob_end_clean();
echo $html_output;
?>
Вы не сможете ничего увидеть, загружая по одному. Единственный загрузчик будет вашим счетчиком вкладки браузера, и он просто отображает все в одно мгновение после того, как все будет загружено. Попробуйте.
Этот метод полностью совместим с html файлами.
Вы можете начать с того, что на главной странице индекса сайта есть только сообщение "Загрузка". Отсюда вы можете использовать ajax для извлечения содержимого следующей страницы и вставки его в текущий, после завершения удаления сообщения "Загрузка".
Возможно, вам удастся убрать с собой только контейнер загружаемых сообщений в верхней части страницы, который составляет 100% ширины/высоты, а затем удаляет указанный div при загрузке.
Последнее может не работать идеально в обеих ситуациях и зависит от того, как браузер отображает контент.
Я не совсем уверен, что это хорошая идея. Для простых статических сайтов я бы сказал, нет. Тем не менее, я видел много тяжелых сайтов javascript в последнее время от проектных компаний, которые используют сложную анимацию и являются одной страницей. Эти сайты используют загрузочное сообщение для ожидания загрузки всех скриптов /html/css, чтобы страница функционировала так, как ожидалось.
Я знаю, что это старый поток, но все же. Другим простым вариантом является эта библиотека: http://gayadesign.com/scripts/queryLoader2/
Не использовать display: none. Если вы это сделаете, вы увидите изменение размера/положение изображения, когда вы выполните show(). Используйте видимость: скрытый вместо этого, и он выложит все правильно, но он просто не будет виден, пока вы его не скажете.
Надеемся, что этот код поможет
<html>
<head>
<style type="text/css">
.js #flash {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
</head>
<body>
<!-- the rest of your code goes here -->
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
// Stuff to do as soon as the body finishes loading.
// No need for $(document).ready() here.
</script>
</body>
</html>