Outlaw011 Outlaw011 - 8 months ago 27
Javascript Question

jquery show loading gif in container while load over

Here's the simple code that we have

<div class="user_side">
<a href="#" class="button white" id="profile">Profile</a>
<a href="#" class="button white" id="listing">Listing</a>

then we have a container:

<div id="contentdiv" style="width: 760px; height: 440px;">

and jquery:

$("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=profile");

$("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=listing");

We need to show loader.gif inside container when one of the menu icons is clicked. What's the best way to do it. Let us just point out that container is transparent and shouldn't show anything by default.



Create a css class called loader and just append the element before using load to the container content.

$("#profile").click(function() {
    var element = $("#contentdiv");

    element.html('<div class="loader"></div>');
    element.load("content.php?id=<? echo $uid; ?>&show=profile");

Other way would be to create the loader div in yout code with display: none; and use show() and hide() to reuse the loader. Like this:

$("#profile").click(function() {
    var loader = $(".loader").show();

    $("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=profile", function() {