Chrome Form Submit stops jQuery "click" function (works in FF & IE8)

Question

I have a form where when the user clicks the submit button, blockUI is triggered and shows a loader GIF as the browser waits for the server to load the resulting page (a model is being run on the server and can take many seconds before the results page loads, so the blockUI is there to let the user know the submit button is working).

ISSUE: In Chrome after clicking "submit" button blockUI appears, but the loader.gif is shown as a broken image, but in FF and IE8 this works perfectly fine. Is there something special about how Chrome handles a form submission where it stops all other HTTP requests (for the loader.gif) or something??

EDIT: This issue occurs also when a link is clicked, which triggers blockUI with the loader.gif. In IE8 the GIF loads, in FF it sometimes loads, and in Chrome it shows a broken image icon. I think the HTTP request for a new page is breaking the loading of the GIF. Any suggestions???

Form is simple, the "submit" button is actually a type="button" so I can control the form submit with Javascript:

<input class="input_button" type="button" value="Submit">

The Javacsript/jQuery is:

$(document).ready(function() {
    $("#form1").validate({
    rules: {
    upfile: "required"  
            }
    });

    var browserWidth = $(window).width();
    var browserHeight = $(window).height();
    var winleft = (browserWidth / 2) - 220 + "px";
    var wintop = (browserHeight / 2) - 30 + "px";

    $('input[value="Submit"]').click(function () {
        $("#form1").submit();
        $.blockUI({
        css:{ "top":""+wintop+"", "left":""+winleft+"", "padding": "30px 20px", "width": "400px", "height": "60px", "border": "0 none", "border-radius": "4px", "-webkit-border-radius": "4px", "-moz-border-radius": "4px", "box-shadow": "3px 3px 15px #333", "-webkit-box-shadow": "3px 3px 15px #333", "-moz-box-shadow": "3px 3px 15px #333" },
        message: '<h2 class="popup_header">Processing Request...</h2><br><img src="/images/loader.gif" style="margin-top:-16px">'
        });
    });

});
</script>

The .validate() works fine.

Answer 1

If you preload the image in your js before your click handler, that should resolve your Chrome issue:

  var loadImg = new Image();
  loadImg.src = "/images/loader.gif";

However, if you're really not too attached to your loader GIF, I would recommend ditching the GIF approach all together and utilizing Spin.js http://fgnass.github.com/spin.js/

There are plenty of known issues with blockUI and images on submit actions, and Spin.js works nicely in all browsers with blockUI.