Ein Lade-GIF in einem Div anzeigen, bis div Inhalt von anderer Seite lädt

Question

Ich lade eine Seite mypage.php und in div1 schließe ich example.php vom selben Server ein.

Das Skript ist:

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

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

</script> 

Wie kann ich eine loading.gif in hinzufügen, während example.php den Inhalt geladen wird? Ich möchte die loading.gif nur anzeigen, bis der Inhalt geladen wird.

Answer 1

Sie haben ein img-Tag-Anzeige einstellen: keine wie:

html:

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

Skript:

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

Answer 2

versuchen, wie dies mit:

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

Diese Methode hat bei mir funktioniert:

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>