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

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

16 голосов
/ 08 апреля 2009

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

Ответы [ 6 ]

17 голосов
/ 08 апреля 2009

Для этого не нужно использовать Ajax. Просто установите обертку страницы div display на none. Затем измените его на block при загрузке документа .

Ваш код может выглядеть следующим образом, используя ванильный 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 / $

11 голосов
/ 08 апреля 2009

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

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

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

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

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

2 голосов
/ 13 января 2011

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

function ajax(){
$('#wapal').html('path to image');
$.ajax({
      url:'somfile.php',
         method:'get',
         success:function(data){
         if(data =='') return;
         $('#wapal').html(data);
       }
    });
}
2 голосов
/ 08 апреля 2009

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

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

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

1 голос
/ 23 июня 2012

Некоторые изменения в 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"
1 голос
/ 15 ноября 2010

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

...