加载程序后的 Ajax 加载答案

【问题标题】：Ajax load after loader加载程序后的 Ajax 加载
【发布时间】：2016-08-08 10:03:25
【问题描述】：

我有一个加载外部 html 页面的特定内容的函数和一个加载器。我想在显示加载器 1.5 秒后立即加载该内容。当我刷新页面加载器加载时，什么也没有发生，我需要再次单击按钮来加载它。

我的代码在这里：

   <script>
//  CSS for loaded content
$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "UserCSS(English).css"
}).appendTo("head");
// Loaded content by button
$(document).ready(function(){
    $(".searchbutton").click(function(){
        $("#CourseContent").load("Userpage.html #Content");
    });
});


var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 1500);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("CourseContent").style.display = "block";
}

</script>

这是我的 html 页面正文。

<body onload="myFunction()" style="margin:0;">
      <div id="Page">
            <div id="Head">
              <a href= "user.php"><img id = "Erulex"src="logo.png" alt="Logo" style="width:300px;height:59px;"></a>
               <input id="Search" placeholder="Search..." type="text" name="Search">
               <a class="searchbutton" href="#"></a>
               <a class="messagebutton" href="#"></a>
               <a class="addbutton" href="#"></a>
               <a class="notificationbutton" href="#"></a>
               <a class="outbutton" href="logout.php"></a>
            </div>
            <div id="Body">
            <div id="loader"></div>
             <div style="display:none;" id="CourseContent" class="animate-bottom" >
            </div>
                <ul id="NaviUp">
                  <li id="U"><a class="active" href="#home">Home</a></li>
                  <li id="U"><a class="active" href="#home">Profile</a></li>
                  <li id="U"><a href="#news">Forum</a></li>
                  <li id="U"><a href="#contact">Store</a></li>
                  <li id="U"><a href="#about">Help Center</a></li>
                  <li id="U"><a href="#about">Friends</a></li>
                </ul>
            </div>
            <div id="Footer">
                <ul id="NavBar">
                    <li id ="D" ><a href="#home">About</a></li>
                    <li id ="D" ><a href="#terms">Terms of Use</a></li>
                    <li id ="D" ><a href="#contact">Help & Support</a></li>
                    <li id ="D" ><a href="#private">Privacy Policy</a></li>
                    <li id ="D" ><a href="#contact">Contact Us</a></li>
                </ul>
            </div>
      </div>
  </body>

我该如何解决这个问题？

【问题讨论】：

在页面加载期间您在 CourseContent 中显示内容是什么？您只是在页面加载时显示一个空 div (id= "CourseContent")
哟哟，没有加载器工作，ajax内容加载工作（当我按下按钮时）但分开。当我点击按钮时，我需要第一次执行加载器，然后想在之后立即加载内容它是自动的。
也许您应该将实际加载内容的代码 ($("#CourseContent").load("Userpage.html #Content");) 从按钮的单击处理程序移动/复制到超时函数 (showPage())？
是的，它适用于 mpf82，非常感谢。

标签： javascript jquery ajax load loader

【解决方案1】：

在你 onload 函数中只需加载数据，然后单击按钮 show 你的 div

<script>
//  CSS for loaded content
$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "UserCSS(English).css"
}).appendTo("head");
// Loaded content by button
$(document).ready(function(){
    $(".searchbutton").click(function(){
        document.getElementById("CourseContent").style.display = "block";
    });
});


var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 1500);
}

function showPage() {
  document.getElementById("loader").style.display = "none";

   $("#CourseContent").load("Userpage.html #Content");
}

【讨论】：