在div中顯示加載gif，直到div加載來自其他頁面的內容

Question

我正在加載頁面mypage.php，在div1中我包含來自同一服務器的example.php。

該腳本是：

    <script>
$(document).ready(function(){

    $("#div1").load("example.php");
  });

</script>  

如何在example.php加載內容時添加loading.gif？ 我想只在內容加載之前顯示loading.gif。

Answer 1

你必須設置一個img標簽display：none like：

HTML：

<div id="img-load">
<img src="loading.gif" />
</div>

腳本：

loader = function(){
    $('#img-load').show();
    $( "#result" ).load( "example.php", function() {
      $('#img-load').hide();
    });
}
loader();

Answer 2

嘗試使用這樣：

$(document).ready(function(){
    $('#imageId').show();// imageId is id to your gif image div
    $('#div1').on('load','example.php',function(){
    $('#imageId').hide();// hide the image when example.php is loaded
  }
});

Answer 3

這個方法對我有用：

HTML

<div id="load"><img src="loading_animation.gif" /></div>
<div id="content">Display content once loaded</div>

使用Javascript

<script type="text/javascript">
$(document).ready(function() {

   $('#load').show(); // Show loading animation
   $('#content').hide(); // Hide content until loaded

$(window).load(function() {

$.ajax({
  post: "GET",
  url: "your_file.php" // File that you're loading

}).done(function() {

  alert("Finished!"); // Alert message on success for debugging
  $('#load').hide(); // Hide loading animation
  $('#content').show(); // Show content

}).fail(function() {

  alert("Error!"); // Alert message if error for debugging

    });
  });
});
</script>