Question

我正在尝试创建一个可见的加载器，直到文档完全加载，但加载器在页面完全加载之前消失。

<div  class="loader">
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>

和使用的js是：

    $("#continut").load("fbapp.php");
    $(window).load(function () {
        $('.loader').fadeOut();
    });

在加载#continut之前，加载器逐渐淡出的原因是什么？

Answer 1

window.load不会考虑AJAX请求，只考虑外部CSS文件，图像等。要执行您需要的操作，请使用load()方法的回调：

$("#continut").load('fbapp.php', function () {
    $('.loader').fadeOut();
});

Answer 2

$().load(url)进行 ajax 调用 - 即异步。

您的窗口已完成加载，但附加的ajax调用尚未完成。 window不会从ajax加载中获取事件。

您可以使用load的“完成”部分，如：

$("#continut").load("fbapp.php", function () {
    $('.loader').fadeOut();
});

加载jQuery页面之前的加载器

2 个答案: