Chrome 表单提交停止 jQuery“点击”功能（适用于 FF 和 IE8）答案

【问题标题】：Chrome Form Submit stops jQuery "click" function (works in FF & IE8)Chrome 表单提交停止 jQuery“点击”功能（适用于 FF 和 IE8）
【发布时间】：2013-09-29 20:03:21
【问题描述】：

我有一个表单，当用户单击提交按钮时，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() 工作正常。

【问题讨论】：

控制台中是否出现“无法访问本地文件”之类的错误？检查图像路径和具体使用的协议
没有控制台错误或日志。如果您“检查”元素 (loader.gif) 并单击其图像路径，则 gif 将在新选项卡中正常加载。 Chrome似乎不会让加载loader.gif的HTTP请求通过
如果您使用图像的绝对路径，同样的行为？
与绝对图像路径的行为相同
对我来说听起来像是一个简单的图像缓存问题。您是否已转储浏览器缓存？你有没有在其他机器上的其他 Chrome 安装中再次尝试过？

标签： jquery forms google-app-engine google-chrome blockui

【解决方案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 的浏览器中都能很好地工作。

【讨论】：

谢谢，我不知道 BlockUI & images & submit 问题。我实际上有点依恋我的微调器 GIF，但我会检查 spin.js