Ajax load after loader

私は外側のhtmlページとローダーの特定の内容を読み込む関数を持っています。ローダーを表示した直後に、そのコンテンツを1.5秒間ロードしたい。ページローダーの読み込み時に何も起こらず、再度ロードするにはボタンをクリックする必要があります。私のコードはここにあります：Ajax load after 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>

ここは私の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>

問題を解決するためにお手伝いください。それを理解できませんでした。どんな助けもありがとうございます。あなたonload機能で

出典

2016-08-08 Habil Ganbarli

ボタンのクリック時には、ページのロード時にCourseContentのコンテンツを表示するためにやって何？ –

Yo Yo、ローダーは動作しません、Ajaxコンテンツの読み込みは動作しますが（ボタンを押したとき）、seperately.Iはローダーを実行するためには最初に必要です私はそこにボタンをクリックし、自動的に直後にコンテンツをロードしたいと思う。 –

あなたのボタンのクリックハンドラからあなたのタイムアウト関数（ 'showPage（）'）に実際にロードするコード（ '$（"＃CourseContent "）。load（" Userpage.html #Content "）; ） '）？ –

だけでデータをロードし、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"); 
}

出典

2016-08-08 10:30:07

Ajax load after loader

答えて

関連する問題