Можно ли предварительно загружать все содержимое страницы (например, показывать загрузочную панель / анимированный gif .. или загружать текст ..), пока содержимое не будет полностью загружено, а затем отображено пользователю / посетителю? Если это возможно, можете ли вы дать мне только указания или ресурсы для достижения этой цели. Поскольку мне удалось легко найти предварительные загрузчики изображений, но я ищу технику предварительной загрузки, которая предварительно загрузит весь контент на странице перед отображением.
Для этого нет необходимости использовать Ajax. Просто установите display div обертки страницы на none . Затем измените его на block при загрузке документа .
Ваш код может выглядеть так, используя vanilla javascript:
<script type="text/javascript"> function preloader() { document.getElementById("preloader").style.display = "none"; document.getElementById("container").style.display = "block"; } window.onload = preloader; </script> <style> div#wrapper { display: none; } div#preloader { top: 0; right: 10px; position:absolute; z-index:1000; width: 132px; height: 38px; background: url(path/to/preloaderBg.png) no-repeat; cursor: wait; text-shadow: 0px 1px 0px #fefefe; //webkit } </style> <body> <div id="preloader">Loading... Please Wait.</div> <div id="wrapper"> <!-- page contents goes here --> </div> </body>
Обновление в jQuery:
<script type="text/javascript"> // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc. $(document).ready(function(){ $("#preloader").hide(); $("#container").show(); }); </script>
Связанные документы: События / готовые , События / загрузка , CSS / css & Core / $
Если вы выберете метод, в котором контент будет скрыт, пока не будет загружена вся страница, не нужно сначала его скрывать в CSS, а затем скрывать в JavaScript. Если вы это сделаете, любой с отключенным или недоступным JavaScript не получит никакой страницы. Вместо этого выполняйте скрытие и показ из сценария.
<body> <script type="text/javascript"> document.body.style.visibility= 'hidden'; window.onload= function() { document.body.style.visibility= 'visible'; }; </script>
Также обратите внимание, что термин «предварительный загрузчик» не совсем подходит для того, что вы здесь делаете. «pre» означает, что вы увеличиваете производительность за счет того, что страница выбрана и кэширована, чтобы она была готова к тому времени, когда она понадобится.
Но на самом деле все наоборот: это снижает производительность, ожидая показывая пользователю ничего, пока загружается страница, когда доступен частичный контент. Преодоление прогрессивного рендеринга делает просмотр медленнее, а не быстрее. Обычно это явно неправильная вещь, и, за исключением нескольких нишевых случаев, лучше всего работать с обычным прогрессивным рендерингом браузера. Так работает Интернет; к нему привыкли люди.
(Люди, то есть за исключением тупоумных типов управления, которые на самом деле не используют или не понимают Интернет, но требуют, чтобы сайт их компаний появился сразу).
Я сделал кое-что, где мне нужно было знать, когда изображение было полностью загружено, поэтому я сделал предварительную загрузку с $.get() функции $.get() и передал функцию обратного вызова в качестве последнего параметра. Таким образом, когда изображение было фактически загружено, мой обратный вызов будет срабатывать, и я бы знал, что браузер уже имеет изображение в кеше.
Вы можете написать функцию, которая будет увеличивать глобальную переменную для каждого изображения, которое вы укажете для предварительной загрузки, а затем ваш обратный вызов может уменьшить счетчик. Когда счетчик возвращается к нулю, вызовите другую функцию. Эта функция теперь срабатывает, когда все изображения предварительно загружены.
Это для изображений. Все остальное может быть гарантировано загружено при запуске $ (document) .ready (). Итак, если вы начнете свою процедуру в этот момент, все на странице должно быть загружено.
Лучший способ
функция ajax () {
$ ('# wapal'). html ('путь к изображению');
$ .ajax ({
URL: 'somfile.php',
Метод: «получить»,
успех: функция (данные) {
if (data == '') return;
$ ( '# Wapal') HTML (данные).
}
});
}
Вы можете сделать это с помощью jquery легко.
SCRIPT
$(window).load(function() { $('#preloader').fadeOut('slow', function() { $(this).remove(); }); });
СТИЛИ
div#preloader { position: fixed; z-index: 999; width: 100%; height: 100%; background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; }
HTML
div id = "preloader"
Некоторые изменения в DMus-Jerad Ответ, поскольку он не работает, когда adsense находится на странице.
Вы можете сделать это с помощью jquery легко.
SCRIPT
$(document).ready(function() { $('#preloader').fadeOut('slow', function() { $(this).remove(); }); });
СТИЛИ
div#preloader { position: fixed; z-index: 999; width: 100%; height: 100%; background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; }
HTML
div id="preloader"