Question

我迷失了我的这个想法。我从未制作加载屏幕，甚至不知道从哪里开始。

以下是我的电话：

$('.ranks').change(function () {
                if (this.checked) {
                    getRanks($(this).val());
                }
            });

这是功能：

function getRanks(rankid) {
            $.getJSON('message_center_getMessageLists.asp', { rankid: rankid }, function (json) {
                var options = '';
                $.each(json.rank, function (i, item) {
                    options += '<option value="' + item.distID + '">' + item.name + ' (' + item.distID + ')</option>';
                });
                $('#fromList').find('option')
                        .remove()
                        .end()
                $('#fromList').append(options);
            })
                    .error(function () { alert("There was an error while trying to make this request;  If it persists please contact support"); })
                    ;
        }

我还没有得到任何工作，所以上面是我尝试之前的原始代码。我有loading.gif。我试图使用toggleClass将加载css添加到正文，但是加载屏幕出现在所有内容之后，尝试使用z-index并且不会将它带到前面。我很茫然。

这是我正在使用的CSS，这是另一个人写的东西，我试图复制他的作品，但我遇到了问题。

.loading{
        background-image:url(newloader.gif);
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-position: center center;
    }

Answer 1

我是这样做的：

css
    .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1;
}

js
$('body').append('<div class="modal">');

我在ajax调用中将它追加到beforeSend（）并在成功时删除它。这样的事情。

Answer 2

詹姆斯 -

http://jsfiddle.net/jordanbaucke/Y3c8c/#base

使用回调来触发加载gif的隐藏和显示。

Answer 3

I've created a fiddle here只是为了给你一个主意。你可以在$ .getjSON的开头使用加载（'show'）并在回调函数中调用loading（'hide'）来重新隐藏它，希望它能帮到你。

Answer 4

您遇到的问题是因为您使用的是$.getJSON（URL，successCallbackFunction）。这只是重写jquery $.ajax()函数。

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

你定义的函数不允许你真正控制ajax调用之前或之后发生的事情。

所以我知道提出加载消息的两种方法是在所有ajax调用之前（和之后）确定，做一些事情。 - 或 - 你可以在任何个人电话之前指定。我几乎完全使用这种方法，因为它给了我个人控制。

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: function(data) {
       // put code here for how to handle a successful return.  This should not take the place of the beforeSend.
  },
  beforeSend: function() {
        // put your code here to open the dialog or show something before the ajax is sent
  },
  complete: function() {
       // put your code here to close the dialog or hide something after the ajax is done
  }
});

如果您想查看如何设置页面和jquery ajax调用以在任何ajax调用之前执行某些操作，或者在任何ajax调用完成之后，您将使用$.ajaxStart()或$.ajaxComplete()

所有这些都在jquery web site中有详细记录。

Answer 5

这是我的0.02美元..

如果页面要在几毫秒内加载，我不想在屏幕上显示加载图像。我决定将show触发器绑定到$ .ajaxStart（）和$ .ajaxStop（）事件。

function bindAjaxLoadingGif() {    
    var $dialog = $("<div></div>")
        .html("<center><img src='/images/loading-image.gif' alt='loading' class='block clear-fix' /><p>Loading</p></center>")
        .dialog({
            autoOpen: false,
            title: 'Loading...',
            modal: true,
            width: 350,
            resizable: false
        });


    $dialog
        .bind("delayshow", function (event, timeout) {
            var $self = $(this);
            $self.data('timeout', setTimeout(function () {
                $dialog.dialog("open");
            }, timeout));
        })
        .bind("delayhide", function (event) {
            var $self = $(this);
            clearTimeout($dialog.dialog("close").data('timeout'));
        });

    $dialog
        .ajaxStart(function () {
            $(this).trigger('delayshow', 800);
        })
        .ajaxStop(function () {
            $(this).trigger('delayhide');
        });
}

然后在我的document.ready中：

$(document).ready(function() { bindAjaxLoadingGif(); });

我设置了800毫秒的延迟，以确保加载对话框没有闪烁。

HTH，迈克

Jquery加载屏幕

5 个答案: