How can I cache a gif immediately after the user logs in using jquery without waiting for a response from the server?

Question

I have a form where the user logs in to the system with his password and password. After clicking on the login button or after submitting the form, I want the loading gif to be uploaded immediately. But it's too late for it to request a gif only when the send button is clicked, so you need to cache it in advance. How do I do it, please help.

Here is my relevant html:

<!---->            
        <form id="signinForm">
            <input id="email" type="text" placeholder="E-mail"/>
            <input id="password" type="password" placeholder="password"/>
            <button type="button"></button>
            <input id="login" type="submit" value="Login"/>
        </form>

        <div id="loader">
           <img class="message" src="assets/images/waiting2.gif"/>
        </div>

Here's my jquery code:

<!---->
        <script type="text/javascript">
            $('#signinForm').submit(function () {
                $.ajax({
                    async: true,
                    type: 'post',
                   beforeSend: function (request) { $('#loader').show(); },
                   complete: function (request, json) { $('#loader').hide(); }

               });
               return false;
            });  
                                                 
        </script>