1

次のような期待- http://www.thepetedesign.com/demos/youtube_loadingbar_demo.html

私は Ajax ローダーに取り組んでいます。Youtube のような ajax ローダーには感銘を受けました。

このローダーを試す前に、私は通常、この方法で ajax ローダーをロードしていました-

ajaxが開始されるたびに、完了します-

<script type="text/javascript">
        $(function () {
            $('.loader').ajaxStart(function () {
                $(this).fadeIn();
            }).ajaxComplete(function () {

                $('.loader').fadeOut();
            });
            $(window).load(function () {
                $('.loader2').fadeOut();
            });

        });
    </script>

HTML-

  <div class="loader">
            <img src="../../Images/AjaxLoader.gif" /></div>
        <div class="loader2">
            <img src="../../Images/AjaxLoader.gif" /></div>

私は画像を使用し、ajax の開始関数と終了関数でそれらを表示および非表示にしていました。

今、私はローダーのようなYouTubeを使いたかった-

単純なリンクの場合、正常に機能していました-

<a id="clickme">Click me</a>

<script type="text/javascript">
    $(document).ready(function () {
        $("a").loadingbar({
done:function({});
        });
    });
    </script>

すべての ajax start および complete 関数でこの ajax ローダーを使用することはできません。

私は試した-

<script type="text/javascript">
    $(function () {
        $('a').ajaxStart(function () {
            $(this).loadingbar();
        }).ajaxComplete(function () {

            $(this).loadingbar();
        });

    });
</script>

この ajax ローダーがアプリケーションのすべての ajax リクエストに表示されるようにします。これはどのように行うことができますか？

4

2 に答える 2

3

次の方法で、jQuery ajax 呼び出しのデフォルトを設定できます。$.ajaxSetup

そのようです：

$.ajaxSetup({
    beforeSend: function() {
        if ($("#loadingbar").length === 0) {
            $("body").append("<div id='loadingbar'></div>")
            $("#loadingbar").addClass("waiting").append($("<dt/><dd/>"));
            $("#loadingbar").width((50 + Math.random() * 30) + "%");
        }
    },
    complete : function() {
        $("#loadingbar").width("101%").delay(200).fadeOut(400, function() {
            $(this).remove();
        });
    }
});

後続の$.ajax呼び出しでは、これらのデフォルトが使用されるため (特に値をオーバーライドしない限り)、読み込みバーが毎回表示されます。ここで実際にこれを見ることができます: http://jsfiddle.net/QfgJ5/1/

複数の ajax リクエストを同時に実行している場合、読み込みバーのアニメーションが中断されることに注意してください。各 ajax リクエストに対して一意のローダー div を生成することを検討することをお勧めします。

于 2013-10-05T22:51:08.097 に答える