javascript - 在 Ajax .load() 期间显示/隐藏 Div

Question

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

$('#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

由于加载是异步的，因此您需要在回调中使用 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

load 是asynchronous, 表示函数 Load 将启动，在运行的同时，脚本继续填充 2，一旦后台运行的函数完成，它就会填充 1。注意，如果函数非常快，则填充 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();
});