Question

我想在.load（）之前显示“LoaderMain”div，当它全部完成时隐藏“LoaderMain”。当我取消注释我的show / hide时，它永远不会显示。

$('#content').html('');
            //$('#LoaderMain').show();
            $("#content").load(url, function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#content").html(msg + xhr.status + " " + xhr.statusText);
            }

            });
            //$('#LoaderMain').hide();

Answer 1

将$('#LoaderMain').hide();放入回调函数中。

例如：

$('#content').html('');
$('#LoaderMain').show();
$("#content").load(url, function(response, status, xhr) {
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#content").html(msg + xhr.status + " " + xhr.statusText);
    }
    $('#LoaderMain').hide();
});

Answer 2

由于load是异步的，你需要在回调中使用hide（）函数：

$('#content').html('');
$('#LoaderMain').show();
$("#content").load(url, function(response, status, xhr) {
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#content").html(msg + xhr.status + " " + xhr.statusText);
    }
    $('#LoaderMain').hide();
});

Answer 3

$("#content").load(url, function(response, status, xhr) {
   // Stuff 1
   $('#LoaderMain').hide();
});
// Stuff 2

加载为asynchronous，这意味着函数Load将启动，运行时，脚本继续到第2个，一旦函数在后台运行，它就会执行注意，如果函数非常快，那么东西1可以在东西2之前完成。

如果函数是synchronous，则东西1总是在第2个之前完成。

这就是为什么AJAX意味着异步JavaScript Xml，因为它是在后台运行的。

Answer 4

$('#content').html('');
        //$('#LoaderMain').show();
        $.ajax({
           url: "your.url",
           beforeSend: function() {
             //do something before sending the ajax, like hiding or showing that spinner
           },
           type: 'post', //or get if you prefer that
           data: "", // put parameters like ?id=1&name=something here
           success: function(data) {
             //do something after successful ajax request like $('#content').html(data);
           }
        });

Answer 5

您使用什么方法加载内容？

http://api.jquery.com/load/#callback-function

大多数jquery事件/ ajax函数都有一个可以发送函数的回调参数，以便在事件/ ajax函数完成处理后执行。

$('#LoaderMain').show();
$('#result').load('ajax/test.html', function() {
  $('#LoaderMain').hide();
});

在Ajax .load（）期间显示/隐藏Div

5 个答案: