Hiển thị gif tải trong div cho đến khi div tải nội dung từ trang khác

Question

Tôi đang tải một trang mypage.php và trong div1 tôi bao gồm example.php từ cùng một máy chủ.

Kịch bản là:

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

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

</script> 

Làm thế nào tôi có thể thêm một loading.gif trong khi example.php đang tải nội dung? Tôi muốn hiển thị loading.gif chỉ cho đến khi nội dung tải.

Answer 1

bạn phải thiết lập một màn hình thẻ img: none như:

html:

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

kịch bản:

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

Answer 2

hãy thử sử dụng như thế này:

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

Phương pháp này làm việc cho tôi:

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>