javascript - 如何在我的网站上通过 ajax 加载内容时显示预加载器

Question

我目前在一个音乐网站上工作，在那里我使用 ajax 加载不同的页面和内容并且一切正常，但我需要显示某种预加载或加载或预加载等待 ajax 获取数据并在它时停止预加载完全的。这是我用来获取我的内容的 ajax 代码，请任何人帮助我如何实现这一点。

// handles the click event, sends the query
function getindex_page() {
    $.ajax({
        url:'templete.php',
        complete: function (response) {
            $('#main-container').html(response.responseText);
        },
        error: function () {
            $('#main-container').html('Bummer: there was an error!');
        },
    });
    return false;
}

<ul class="menu-items">
                        <li>
                            <a class="browse" href="/index.php" onclick="return getindex_page();"><i class="arcd-archive" ></i></br>Browse</a>                             
                        </li>
					</ul>
<div id="main-container"> ajax will loads contents here </div>

任何帮助将不胜感激。

Answer 1

你会想要将其更改为微调器或其他任何东西，但基本上这很容易:

// handles the click event, sends the query
function getindex_page() {
   $('#main-container').html('Loading... Please wait');
   // or change this to show a div that covers the page and has a spinner or whatever
   $.ajax({

      url:'templete.php',
    complete: function (response) {
        $('#main-container').html(response.responseText);
    },
    error: function () {
        $('#main-container').html('Bummer: there was an error!');
    },
});
return false; }

Main-container 的 html 将在点击事件发生后立即更改为 Loading...... 并将在 ajax 完成时被覆盖。如果你展示了一个微调器，只需将它隐藏在你的完整函数中。