加载程序后加载Ajax

Question

我有一个功能，可以加载外部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>

我该如何解决？

Answer 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");
}