Ajax load nach loader

Ich habe eine Funktion, die spezifischen Inhalt der äußeren HTML-Seite lädt und ein Ladeprogramm. Ich möchte diesen Inhalt direkt nach dem Anzeigen des Ladeprogramms für 1,5 Sekunden laden. Wenn ich den Ladevorgang des Seitenladeprogramms aktualisiere, passiert nichts und ich muss erneut auf die Schaltfläche klicken, um sie zu laden. Mein Code ist hier:Ajax load nach loader

<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>

Und hier ist meine HTML-Seite Körper.

<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>

Könnten Sie bitte helfen, es zu lösen. Konnte es nicht herausfinden. Jede Hilfe wird geschätzt.

Quelle

2016-08-08 Habil Ganbarli

was Sie Inhalte in CourseContent während der Seitenlast zu zeigen, tun? Sie zeigen nur ein leeres div ('id =" CourseContent "') auf der Seite laden –

Yo Yo, Nein der Lader funktioniert, der Ajax Inhalt lädt funktioniert (wenn ich auf Knopfdruck) aber separat.Ich brauche 1. Loader ausführen, wenn ich klicke dort auf den Button und möchte den Inhalt sofort danach automatisch laden. –

Vielleicht sollten Sie den Code verschieben/kopieren, der den Inhalt tatsächlich lädt ('$ (" # CourseContent "). Load (" Userpage.html #Content ");') vom Klick-Handler Ihrer Schaltfläche zu Ihrer Timeout-Funktion ('showPage () ')? –

in Ihnen onload Funktion nur die Daten laden und auf Klick auf den Button show Ihre 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"); 
}

Quelle

2016-08-08 10:30:07

Ajax load nach loader

Antwort

Verwandte Themen