如何在我的网站上按 ajax 加载内容时显示预加载器

Question

我目前正在一个音乐网站上工作，在那里我使用 ajax 加载不同的页面和内容并且一切正常，但我需要在 [=23] 时显示某种预加载或加载或预加载等待=] 获取数据并在完成时停止预加载。这是我用来获取我的内容的 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 完成时被覆盖。如果你展示了一个微调器，只需将它隐藏在你的完整函数中。

Answer 2

您好，请像这样使用 "beforeSend" 功能。然后加载文本将仅在 ajax 调用开始时可见。

function getindex_page() {
  var strLoadingText = 'Loading... Please wait';
  
  $.ajax({
    url:'templete.php',
    beforeSend: function () {
      $('#main-container').html(strLoadingText);
    },
    complete: function (response) {
        $('#main-container').html(response.responseText);
    },
    error: function () {
        $('#main-container').html('Bummer: there was an error!');
    },
});
  
  return false; 
}

如何在我的网站上按 ajax 加载内容时显示预加载器

how to show preloader on loading contents by ajax on my site

html

javascript

ajax

jquery

preloader