Chrome表单提交停止jQuery“；点击"；功能（在FF&IE8中工作）

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

问题：在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">

JavaCScript/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>

$（文档）.ready（函数（）{
$（“#表格1”）。验证({
规则：{
upfile:“必需”
}
});
var browserWidth=$（窗口）.width（）；
var browserHeight=$（窗口）.height（）；
变量winleft=（浏览器宽度/2）-220+“px”；
变量wintop=（浏览器高度/2）-30+“px”；
$（'input[value=“Submit”]”）。单击（函数（）{
$（“#表格1”）.submit（）；
$.blockUI({
css:{“顶部”：“+wintop+”，“左侧”：“+winleft+”，“填充”：“30px 20px”，“宽度”：“400px”，“高度”：“60px”，“边框”：“0无”，“边框半径”：“4px”；“-webkit边框半径”：“4px”；“-moz边框半径”：“4px”，“方框阴影”：“3px 3px 15px#333”；“webkit方框阴影”：“3px 3px 15px#333”；“moz方框阴影”：“3px 3px 15px”，
消息：“正在处理请求…”
});
});
});

---

.validate（）

工作正常。

如果在单击处理程序之前将图像预加载到js中，应该可以解决Chrome问题：

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

但是，如果您真的不太喜欢GIF加载程序，我建议您放弃GIF方法并使用Spin.js

---

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

如果在单击处理程序之前将图像预加载到js中，应该可以解决Chrome问题：

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

但是，如果您真的不太喜欢GIF加载程序，我建议您放弃GIF方法并使用Spin.js

---

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

控制台中是否出现“无法访问本地文件”之类的错误？检查映像路径，特别是使用的协议无控制台错误或日志。如果“检查”元素（loader.gif）并单击其图像路径，gif将在新选项卡中正常加载。如果对图像使用绝对路径，Chrome似乎不会让加载loader.gif的HTTP请求通过名称行为？绝对图像路径的相同行为对我来说似乎是一个简单的图像缓存问题。您是否已转储浏览器缓存？您是否在其他机器上的其他Chrome安装中再次尝试过？控制台中是否出现“无法访问本地文件”之类的错误？检查映像路径，特别是使用的协议无控制台错误或日志。如果“检查”元素（loader.gif）并单击其图像路径，gif将在新选项卡中正常加载。如果对图像使用绝对路径，Chrome似乎不会让加载loader.gif的HTTP请求通过名称行为？绝对图像路径的相同行为对我来说似乎是一个简单的图像缓存问题。您是否已转储浏览器缓存？您是否在其他机器上的其他Chrome安装中再次尝试过它？谢谢，我不知道BlockUI、图像和提交问题。实际上，我有点喜欢我的旋转器GIF，但我会查看spin.js。谢谢，我不知道BlockUI、图像和提交问题。实际上，我有点喜欢我的旋转器GIF，但我会查看spin.js