Возможно ли предварительно загружать содержимое страницы с помощью техники ajax/jquery?

Можно ли предварительно загружать все содержимое страницы (например, показывать загрузочную панель/анимированный gif.. или загружать текст..) до тех пор, пока содержимое не будет полностью загружено, а затем отображено пользователю/посетителю? Если это возможно, можете ли вы дать мне только указания или ресурсы для достижения этой цели. Поскольку мне удалось легко найти предварительные загрузчики изображений, но я ищу технику предварительной загрузки, которая будет предварительно загружать весь контент на странице перед отображением.

Ответ 1

Нет необходимости использовать Ajax для этого. Просто установите обертку страницы div display на 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>

Связанные документы: События /ready, События /load, CSS/css и Core/$

Ответ 2

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

<body>
    <script type="text/javascript">
        document.body.style.visibility= 'hidden';
        window.onload= function() { document.body.style.visibility= 'visible'; };
    </script>

Также обратите внимание, что термин "предварительный загрузчик" не совсем подходит для того, что вы здесь делаете. 'Pre подразумевает, что вы увеличиваете производительность за счет того, что страница выбрана и кэширована, чтобы она была готова к тому времени, когда она понадобилась.

Но на самом деле это наоборот: он снижает производительность, ожидая показывая пользователю ничего, пока загружается страница, когда доступен частичный контент. Преодоление прогрессивного рендеринга делает просмотр медленнее, а не быстрее. Обычно это явно неправильная вещь, и, за исключением нескольких нишевых случаев, лучше всего работать с обычным прогрессивным рендерингом браузера. Так работает Интернет; к нему привыкли люди.

(Люди, то есть за исключением тупоумных типов управления, которые действительно не используют или не понимают Интернет, но требуют, чтобы их сайт компании появился сразу.)

Ответ 3

Я сделал кое-что, где мне нужно было знать, когда изображение было полностью загружено, поэтому я сделал предварительную загрузку с помощью функции $.get() и передал функцию обратного вызова в качестве последнего параметра. Таким образом, когда изображение было фактически загружено, мой обратный вызов будет срабатывать, и я бы знал, что браузер уже имеет изображение в кеше.

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

Это для изображений. Все остальное может быть гарантировано загружено при запуске $(document).ready(). Итак, если вы начнете свою процедуру в этот момент, все на странице должно быть загружено.

Ответ 4

Лучший способ

function ajax(){
$('#wapal').html('path to image');
$.ajax({
      url:'somfile.php',
         method:'get',
         success:function(data){
         if(data =='') return;
         $('#wapal').html(data);
       }
    });
}

Ответ 5

Вы можете легко сделать это с помощью 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"

Ответ 6

Некоторые изменения в 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"