加载时加载jquery

Question

我有这样的脚本

function manualSeat(){
    $('.dimmed').show();
    $("#petaKursi").load('url');
    $('#wagonCode').val('');
    $('#wagonNumber').val('');
    $('#selSeats').val('');
    selectedGerbong = '';
    selectedSeats = Array();
    $('#manualSeatMap').show();
    $('.dimmed').hide(); 
}

上面的代码不起作用可能是因为代码不会等到加载语法完成加载，..（也许）

我想问的是，如何让my $('.dimmed')像在开始（显示）加载时开始加载和在加载完成（隐藏）时停止一样工作

我想要的是这样的：页面加载（每个 div）=>单击按钮=>将页面加载到 div（加载时，showLoader），完成加载时（hideLoader）

Answer 1

尝试这个：

var dimmed = $('.dimmed');
var showLoader = function () {
    dimmed.fadeIn();
};
var hideLoader = function () {
    dimmed.fadeOut();
};
document.addEventListener('DOMContentLoaded', showLoader);
window.onload = hideLoader;

无论何时想要显示或隐藏加载器元素，都可以调用 showLoader 和 hideLoader 方法。

Answer 2

感谢 Rayon Dabre 我真正想要的是这样

function manualSeat(){
    dimmed.fadeIn();
    $("#petaKursi").load('blablabla', function() {
       dimmed.fadeOut();
        });
    $('#wagonCode').val('');
    $('#wagonNumber').val('');
    $('#selSeats').val('');
    selectedGerbong = '';
    selectedSeats = Array();
    $('#manualSeatMap').fadeIn(); 
}

Answer 3

做你想做的最好的方法是使用 AjaxStart 和 AjaxStop 函数。 这样你就会在 Ajax 调用（.load 就是其中之一）时触发它，它会执行一些操作。

所以在你的情况下：

$(document).ajaxStart(function (){
    //I begin the ajax call so I show the layer
    $('.dimmed').show();
    //you can also do other stuffs like changing the tab title
    document.title = 'loading...';
}).ajaxStop(function (){
    //The ajax loading has ended
    $('.dimmed').hide();
    document.title = 'page';
});

我会为您在加载时使用的图层寻找一个 ID 来识别它。 如果您只想为某些 ajax 调用而不是为其他调用触发此事件，请添加

global: false

归因于该特定的 ajax 调用。