I cannot initially hide(); my span tag
<p>I have a loader animated gif that I want to hide and show during my ajax request.</p>

<p>this is my loader html code.</p>

<pre><code>&lt;span id="loader"&gt;&lt;img src="images/icons/ajax-loader.gif" alt="loader" /&gt;&lt;/span&gt;
</code></pre>

<p>I want to initially hide it with this</p>

<pre><code>    &lt;script type="text/javascript"&gt;
        $(document).ready(function() {
            $('#loader').hide()
        });
    &lt;/script&gt;
</code></pre>

<p>however it still shows up until until my ajax function is actually run and then hides it. but I want to hide it at startup.</p>
