文章摘要页预加载异常：首次加载提前消失，需等待函数执行完成

问题核心是异步操作未被正确等待：PegaListaPosts内部的AJAX请求是异步执行的，但你的Promise链没有等待这个请求完成，就直接执行了隐藏预加载的步骤。首次加载时AJAX请求未被缓存，耗时较长，所以预加载先消失，摘要还在加载；第二次加载时请求被浏览器缓存，速度极快，看起来像是同步完成，所以表现正常。

修复步骤： #

1. 让PegaListaPosts返回Promise，将AJAX的异步逻辑包装起来，这样才能在Promise链中等待它完成。
2. 调整Promise链的执行顺序，确保只有在文章摘要加载完成后，才隐藏预加载并恢复页面滚动。

修改后的代码： #

1. 重构PegaListaPosts函数

function PegaListaPosts() {
    // 返回Promise包装AJAX操作
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "/Blog/PegaResumoPost",
            type: "GET",
            dataType: "json", // 修正拼写：原datatype改为驼峰dataType
            contentType: "application/json; charset=utf-8", // 修正拼写：原contenttype改为驼峰contentType
            success: (data) => {
                const lista = data.resumosPosts;
                // 简化重复的条件判断
                CarregarResumos(lista, data.culturaAtual);
                resolve(data); // 加载完成后触发resolve
            },
            error: (xhr, status, error) => {
                reject(error); // 捕获AJAX错误
            }
        });
    });
}

2. 调整预加载的执行逻辑

$(window).on("load", function () {
    // 按顺序执行：隐藏inner → 加载文章摘要 → 隐藏预加载 → 恢复页面滚动
    $('#preloader .inner').fadeOut()
        .then(() => PegaListaPosts()) // 等待摘要加载完成
        .then(() => $('#preloader').delay(10).fadeOut('slow').promise()) // 等待动画完成
        .then(() => $('body').delay(10).css({ 'overflow': 'visible' }))
        .catch((error) => {
            // 处理加载失败的情况，避免预加载一直显示
            console.error('文章摘要加载失败:', error);
            $('#preloader').fadeOut('slow');
            $('body').css({ 'overflow': 'visible' });
        });
});

关键说明： #

• 修正了AJAX配置中的拼写错误（datatype→dataType、contenttype→contentType），这可能影响数据解析的正确性。
• 使用.promise()方法处理jQuery动画，确保动画完全结束后再执行后续步骤。
• 添加错误捕获逻辑，避免因AJAX请求失败导致预加载无法隐藏的问题。

内容的提问来源于stack exchange，提问作者Leonardo Silva