2

MVC 3 プロジェクトに、レポート サービスからレポートを取得するページがあり、その結果は次のように表示されます。

<img src="@Url.Action("ActionName", "Controller",...etc

この画像はページの下部に表示されます。Action は FileContentResult を返し、表示に数秒かかる場合があります。

私がやりたいのは、画像が返されている間にスピナーを表示することです。私が抱えている（そしてこれについてたくさん検索した）問題は、それがajaxではなく、JQueryを使用していないことです。ブラウザが画像を取得するために使用する単純な古いURLです。

問題は、待機中にスピナーを表示するにはどうすればよいですか? これは可能ですか？それとも、JQuery/Ajax を使用して画像を別の場所にロードしてから表示する必要がありますか?

4

2 に答える 2

5

これが私のやり方です。通常、これを _layout ページに追加して、このスクリプトと div がプロジェクトのすべてのページに読み込まれるようにします。これにより、Spinner は ajaxSend があるたびに表示され、ajaxStop または ajaxError で非表示になります。 

<script type="text/javascript">
        $(document).ready(function () {
            BindSpinner();
        });

        function BindSpinner() {
            $("#spinner").bind("ajaxSend", function () {
                $(this).show();
            }).bind("ajaxStop", function () {
                $(this).hide();
            }).bind("ajaxError", function () {
                $(this).hide();
            });
        };
    </script>



  <div id="spinner" class="spinner" style="display: none;">
       <img id="img-spinner" src="@Url.Content("~/Content/Images/ajax-loader.gif")" alt="Loading..." />
  </div>

これで、ajax によって UI が待機するたびに、スピナーが表示されます。

ajax を使用してアクションを呼び出すためのガイドは、こちらにあります。

于 2012-05-24T08:43:50.653 に答える
1

しばらく前に私は同様の問題を抱えていて、スピナーの自動的な表示を処理するjQueryプラグインを作成しましたhttp://denysonique.github.com/imgPreload/

于 2012-11-24T06:16:31.680 に答える