Outlaw011 Outlaw011 - 1 year ago 144
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.


Answer Source

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() {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download