Question

我有一个表单，当用户单击提交按钮时，触发blockUI并显示加载器GIF，因为浏览器等待服务器加载结果页面（模型正在服务器上运行，可能需要很多秒在结果页面加载之前，所以blockUI用于让用户知道提交按钮正在工作）。

问题：在Chrome中点击“提交”按钮后会出现blockUI，但loader.gif显示为已损坏的图像，但在FF和IE8中这完全正常。 Chrome处理表单提交的方式有什么特别之处吗？它会停止所有其他HTTP请求（对于loader.gif）或什么？

编辑：单击链接时也会出现此问题，该链接使用loader.gif触发blockUI。在IE8中，GIF加载，在FF中有时会加载，在Chrome中，它会显示损坏的图像图标。我认为新页面的HTTP请求打破了GIF的加载。任何建议???

表单很简单，“提交”按钮实际上是type="button"所以我可以使用Javascript控制表单提交：

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

Javacsript / jQuery是：

$(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>

.validate()工作正常。

Answer 1

如果您在点击处理程序之前在js中预加载图像，则应解决Chrome问题：

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

但是，如果你真的不太喜欢你的加载器GIF，我会建议一起放弃GIF方法并利用Spin.js http://fgnass.github.com/spin.js/

在提交操作上有很多已知的blockUI和图像问题，Spin.js在所有使用blockUI的浏览器中都能很好地工作。

Chrome表单提交停止jQuery“点击”功能（适用于FF＆amp; IE8）

1 个答案: