在原型中,我可以用下面的代码显示“加载…”图像:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

在jQuery中,我可以将服务器页面加载到一个元素中:

$('#message').load('index.php?pg=ajaxFlashcard');

但是我如何附加一个加载旋转到这个命令,因为我在原型?


当前回答

<script>
                $(window).on('beforeunload', function (e) {
                    $("#loader").show();
                });
                $(document).ready(function () {
                    $(window).load(function () {
                        $("#loader").hide();
                    });
                });
            </script>

<div id="loader">
                    <img src="../images/loader.png" 
                         style="width:90px;">
                </div>

其他回答

你可以使用jQuery的。ajax函数,使用它的选项beforeSend,定义一些函数,你可以在其中显示类似loader div的东西,在success选项中,你可以隐藏loader div。

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

你可以有任何旋转Gif图像。下面是一个网站,根据你的配色方案,它是一个很棒的AJAX加载器生成器:http://ajaxload.info/

使用加载插件:http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

你总是可以使用Block UI jQuery插件,它为你做的一切,它甚至在ajax加载时阻塞任何输入的页面。如果这个插件似乎不能正常工作,你可以在这个回答中阅读正确的使用方法。来看看。

这是一个非常简单和智能的插件,用于特定的目的: https://github.com/hekigan/is-loading

$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });