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

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

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

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

Спасибо!

Источник

3 ответа

Чтобы сделать это более очевидным, представьте, что у нас есть 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() заменит наш индикатор загрузки изображения на загруженный контент.

Вы можете использовать другие AJAX-функции jQuery, такие как $.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>
Источник 
$(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);
            }
        });
});

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

Источник

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

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

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

Удачи!

Источник
Другие вопросы по тегам