0

我创建了一个加载屏幕插件。场景是我正在使用 ajax 加载进行页面导航。因此，在使用 ajax 加载页面之前，我将使用代码显示加载屏幕$('body).loadingMask('show')，一旦页面加载完全加载，我将使用代码删除加载屏幕$('body').loadingMask('hide)。

问题是，在插件中检索目标 dom 元素时存在一些延迟。

这是代码的一般结构

$('body').loadingMask('show');
$.ajax({
url : 'views/next.html',
    async : false,
success : function(content, textStatus, jqXHR) {
$('body').append(content);
},
error : function(content, textStatus, jqXHR) {
throw "Unable to load template. Please check the path and name of the template"
}
});
$('body').loadingMask('hide');

问题是，在loadingMask插件的show函数内部，检索目标dom元素（即body）存在延迟。因此，实际上，代码$('body).loadingMask('show')仅在 ajax 页面加载完成后运行。

为了使它工作，我添加了一个时间延迟。这似乎工作正常。

这是修改后的代码

$('body').loadingMask('show');
setTimeout(function(){
$.ajax({
url : 'views/next.html',
    async : false,
success : function(content, textStatus, jqXHR) {
$('body').append(content);
},
error : function(content, textStatus, jqXHR) {
throw "Unable to load template. Please check the path and name of the template"
}
});
},500);
$('body').loadingMask('hide');

现在我可以在页面加载时看到加载屏幕。

4

1 回答 1

1

如果您删除async:false，您可以在添加内容后立即使用 ajax 成功调用您的插件。

async:false已弃用并且经常导致无法预料的问题

$('body').loadingMask('show');
$.ajax({
    url: 'views/next.html',
    success: function(content, textStatus, jqXHR) {
        $('body').append(content).loadingMask('hide');
    },
    error: function(content, textStatus, jqXHR) {
           /* likely need to remove maske here and add something to content to advise user*/
        throw "Unable to load template. Please check the path and name of the template"
    }
});
于 2012-11-05T05:56:00.643 回答