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 に答える