JQuery / JS страница загрузки - PullRequest
Новая
       3

JQuery / JS страница загрузки

0 голосов
/ 18 мая 2011

Я выполнил поиск по сайту, но не смог найти, что именно хочу.

Поэтому я хочу, чтобы при загрузке страницы отображался (например) AJAX loader, а не оставался белым...

Пожалуйста, дайте более подробный код, я нов.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 18 мая 2011

Конструктивно это будет примерно так:

  1. Загрузите DOM с пустыми контейнерами, включая «образ загрузчика»
  2. Загрузка файлов JavaScript, которые загружают ваш контент и заполняют контейнеры
  3. Присоединить обработчики событий JavaScript ко всем ссылкам, чтобы переопределить поведение по умолчанию при загрузке новой страницы

Но вам лучше использовать какую-то платформу для этого. "Hash bang" (#!) - популярный шаблон, выполните поиск в Google.

Удачи!

0 голосов
/ 18 мая 2011

Чтобы сделать это более наглядным, представьте, что у нас есть HTML-страница с такой разметкой: 

<button id="btnLoad">Load Content</button>
<div id="content">
  Please click "Load Content" button to load content.
</div>

Мы хотим загружать контент, когда пользователь нажимает кнопку «Загрузить контент».Поэтому нам нужно сначала привязать событие нажатия к этой кнопке и сделать AJAX-запрос только после ее запуска. 

$("#btnLoad").click(function(){
    // Make AJAX call
    $("#content").load("http://example.com");
});

код выше загружает содержимое из http://example.com в.Пока страница загружается, мы хотим отобразить наше анимированное GIF-изображение в «контенте».Таким образом, мы могли бы еще больше улучшить наш код следующим образом: 

$("#btnLoad").click(function(){

  // Put an animated GIF image insight of content
  $("#content").empty().html('<img src="loading.gif" />');

  // Make AJAX call
  $("#content").load("http://example.com");
});

Функция .load () заменит наш индикатор загрузки изображения на загруженный контент.

Возможно, вы используете другие функции jQuery AJAXкак $ .ajax (), $ .get (), $ .post (), в этом случае используйте функцию обратного вызова для удаления загрузки изображения / текста и добавления загруженных данных.

Здесь также есть решение длясодержимое скрыто до тех пор, пока вызов ajax не будет завершен для его раскрытия.

CSS: 

<style type="text/css">
     #content 
     {
         display:none;
         }
</style>

jQ: 

$(function () {

            var loadingImg = $('#loadingImage');
            loadingImg.show();

            $.ajax({
                url: "secondpage.htm",
                cache: false,
                success: function (html) {
                    loadingImg.hide();
                    $("#content").append(html).fadeIn();
                }
            });

        });

HTML: 

<body>
    <img src="loader.gif" id='loadingImage' alt='Content is loading. Please wait' />
    <div id='content'>

    </div>

</body>
0 голосов
/ 18 мая 2011 
$(function(){

  var ajax_load = "<img src='images/loading.gif' alt='loading...' />";
  $('body').html(ajax_load);
    var postData = $("#form").serialize();
        $.ajax({
            type: "POST",
            url: "ajaxpage.php",
            data: postData,
            success: function(body){
            $('body').html(body);
            }
        });
});

Я верю, что это то, что вы хотите.

...