在加载另一个div时隐藏div

Question

I have this :

window.onload = function() {
    $("#show").load("show.php");
}

and my html :

<div id='loader'>Loading Data</div>
<div id='show'></div>
<div id='other'>some text.........</div>

What I want is, on page loaded, html show <div id='loader'> and <div id='other'> when JS/JQuery success loaded the <div id='show'> then hide <div id='loader'>

Can you help me?

Answer 1

.load() provide a callback you can use this. Just updated your js with following

$("#show").load("show.php", function(){
   $('#loader, #show').toggle(); 
});

Answer 2

load() has a callback that runs when it is complete. Use this to show and hide the relevant divs. You should also use jQuery ready function instead of window.onload so that the page won't have to wait for all resources (images etc) before it can load in the php:

$(document).ready(function() {
    $("#show").load("show.php", function() {
        $('#loader').hide();
    });
});

EDIT: Super User's answer provides a better solution than using .hide(), wish I'd thought of it!

Answer 3

as @techLove's comment here , I found this working on me. I modified his answer into this:
$( "#show" ).load( "show.php", function() {$("#loader").css("display","none");});