Wyświetl ładowanie gif w div, dopóki div nie załaduje treści z innej strony

Question

Załaduję stronę mypage.php oraz w div1 Dołączam example.php z tego samego serwera.

Skrypt jest:

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

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

</script> 

Jak mogę dodać loading.gif w podczas example.php się ładuje zawartość? Chcę pokazać ładowanie.gif tylko do momentu załadowania zawartości.

Answer 1

trzeba ustawić wyświetlanie znacznika img: none jak:

html:

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

scenariusz:

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

Answer 2

spróbuj tak:

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

Ta metoda zadziałała dla mnie:

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>