Ненавиджу, як ви насправді бачите, як завантажуються веб-сторінки. Думаю, було б набагато привабливіше почекати, поки сторінка повністю завантажиться і не буде готова до показу, включаючи всі сценарії та зображення, а потім браузер відобразить її. Отже, у мене є два запитання ...
Заздалегідь дякую за вашу мудрість!
Відповіді:
Це дуже погана ідея з усіх наведених причин та багато іншого. Тим не менш, ось як ви це робите за допомогою 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.
<noscript>тегів для "скасування" display:noneефекту.
Я думаю, це насправді погана ідея. Користувачі люблять бачити прогрес, простий і простий. Утримуючи сторінку в одному стані протягом декількох секунд, а потім миттєво відображаючи завантажену сторінку, користувач відчує, що нічого не відбувається, і ви, ймовірно, втратите відвідування.
Одним із варіантів є показ стану завантаження на вашій сторінці під час обробки матеріалів у фоновому режимі, але це, як правило, зарезервовано для випадків, коли сайт фактично виконує обробку за введенням користувачем.
http://www.webdeveloper.com/forum/showthread.php?t=180958
У підсумку, вам, принаймні, потрібно проявляти деяку візуальну активність під час завантаження сторінки, і я думаю, що завантаження сторінки невеликими шматочками за раз не все так погано (припускаючи, що ви не робите щось, що серйозно сповільнює сторінку час завантаження).
display: none. Як тільки все завантажується, блешня згасає, а вміст згасає. Це добре працює, оскільки спінер тепер загально розуміється як "завантаження, будь ласка, почекайте" . Примітка: Він використовує jQuery.
Ось рішення за допомогою jQuery:
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
Я помістив цей сценарій відразу після мого </body>тегу. Просто замініть "#container" селектором для елементів DOM, які потрібно приховати. Я спробував кілька варіантів цього (включаючи .hide()/ .show(), та .fadeOut()/ .fadeIn()), і, просто встановлення непрозорості, здається, має найменше шкідливих наслідків (мерехтіння, зміна висоти сторінки тощо). Ви також можете замінити css('opacity', 0)на fadeTo(100, 1)для більш плавного переходу. (Ні,fadeIn() не буде працювати, принаймні не згідно з jQuery 1.3.2.)
Тепер застереження: я реалізував вищезазначене, оскільки використовую TypeKit, і виникає прикрий мерехтіння, коли ви оновлюєте сторінку, а шрифти завантажуються за кілька сотень мілісекунд. Тому я не хочу, щоб на екрані з’являвся текст, поки TypeKit не завантажиться. Але, очевидно, у вас великі проблеми, якщо ви використовуєте наведений вище код і щось на вашій сторінці не вдається завантажити. Є два очевидні шляхи, як його можна вдосконалити:
Я не буду заважати впроваджувати тут індикатор завантаження, але обмеження часу просто. Просто додайте це до сценарію вище:
$(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, але обидва працюють добре.
Відразу після тегу <body> додайте щось подібне ...
<style> body {opacity:0;}</style>
І найперше у вашому <head> додайте щось на зразок ...
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
Наскільки це є доброю або поганою практикою, залежить від ваших відвідувачів та часу очікування.
Питання, яке ще залишається відкритим, і я не бачу тут відповідей, - як бути впевненим, що сторінка стабілізувалась. Наприклад, якщо ви завантажуєте шрифти, сторінка може трохи переформатувати, поки всі шрифти не будуть завантажені та відображені. Я хотів би знати, чи є подія, яка повідомляє мені, що сторінка закінчена з рендерингом.
Також переконайтесь, що сервер буферизує сторінку та не відразу (під час створення) передає її в клієнтський браузер.
Оскільки ви не вказали свій стек технологій:
обов’язково: "використовувати jQuery"
Я бачив сторінки, які розміщують чорний або білий div, який охоплює все зверху сторінки, а потім видаляє його у події document.load. Або ви могли б використовувати .ready в JQuery Це , так би мовити, це був один з найбільш anoying веб - сторінок , які я коли - небудь бачив, я б порадив проти нього .
Ви можете приховати все, використовуючи деякі css:
#some_div
{
display: none;
}
а потім у javascript призначити функцію document.onload для видалення цього div.
jQuery робить подібні речі дуже простими.
Хоча це не завжди хороша ідея, ви вільні вирішити, чи справді хочете це зробити. Є кілька різних способів це зробити, і я знайшов тут простий приклад:
http://www.reconn.us/content/view/37/47/
Можливо, не найкращий, але він повинен допомогти вам розробити власне рішення. Удачі.
у PHP-Fusion 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.
На додаток до відповіді Тревора Бернхема, якщо ви хочете мати справу з відключеним 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;
}
ЯВАСКРИПТ
//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, але, ймовірно, це збільшить зміну вашої сторінки, яка відображається так, як ви хочете, щоб вона відображалася. Використовуйте це лише тоді, коли це дійсно потрібно!
Ви можете почати з того, що головна індексна сторінка вашого сайту міститиме лише повідомлення із записом "Завантаження". Звідси ви можете використовувати ajax для отримання вмісту вашої наступної сторінки та вбудування його в поточну, після завершення видалення повідомлення "Завантаження".
Можливо, вам вдасться уникнути, просто включивши завантажувальний контейнер повідомлень у верхній частині сторінки, який має 100% ширину / висоту, а потім видаліть згаданий div при завантаженні завершено.
Останнє може не працювати ідеально в обох ситуаціях і залежить від того, як браузер надає вміст.
Я не зовсім впевнений, чи це гарна ідея. Для простих статичних сайтів я б сказав, що ні. Однак останнім часом я бачив багато важких сайтів у форматі javascript від дизайнерських компаній, які використовують складну анімацію та складають одну сторінку. Ці сайти використовують повідомлення про завантаження, щоб дочекатися завантаження всіх скриптів / html / css, щоб сторінка працювала належним чином.
Я знаю, що це стара тема, але все ж. Ще одним простим варіантом є ця бібліотека: http://gayadesign.com/scripts/queryLoader2/
Сподіваюся, цей код допоможе
<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>