Show loading image while ajax being executed
<p>I'm trying to add a ajax loading image to a div container while the ajax request would be executed.</p>

<p>My Jquery code looks like the following:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        $("#store, #gender, #username").change(function () {
            var store = $("#store").val();
            var gender = $("#gender").val();
            var receiver = $("#username").val();

            $.ajax({
                type: "POST",
                data: {
                    "store" : store,
                    "gender" : gender,
                    "receiver" : receiver
                },
                url: "handling/ajax/store_items_ajax.php",
                success: function(data){
                    $("#result").html(data);
                }
            });
        });
    });
&lt;/script&gt;
</code></pre>

<p>How would I add a loading image to the following html div:</p>

<pre><code>&lt;div id="result" class="col-md-12"&gt;&lt;/div&gt;
</code></pre>

<p>Does anyone know this?</p>