jQuery live event replacing inner HTML on anchor tag

Question

I have the following which works but when the user presses 'more' <a> tag (although styled as a button) it then puts a loading gif inside it but from the time the user clicks the button to when the image appears is noticeable. Almost 1 second which makes it look ugly.

It looks like it removes the inner HTML has a think and then populates the image. Could it be its taking time finding the image or something?

<script type="text/javascript">
        /* <![CDATA[ */
        $(document).ready(function() {

            $('#blogEntryList #moreLink').live("click", function() {

                $(this).html("<img src='../../Content/_layout/images/ajax-loader.gif' />");

                return false;
            });

        });
        /* ]]> */           
    </script> 

Answer 1

If thats all the code, then looks likely that its taking time to serve up the image.

Would be better to load the image as hidden, and then just show/hide when needed