1

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

4

1 回答 1

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

于 2014-01-17T20:52:59.480 回答