如何阻止Ajax请求触发加载屏？现有加载系统异常修复

你的加载屏在AJAX更新DOM后异常的核心原因：

• 初始逻辑依赖window.onload触发隐藏，但AJAX更新页面时，window.onload已经执行完毕，新插入的加载屏不会触发这个事件。
• 若AJAX请求的HTML内容里包含了加载屏代码，会重复创建#loding-container元素，原有的隐藏逻辑无法作用于新元素。

针对当前代码，你需要做以下调整：

1. 移除window.onload绑定，改为手动控制加载屏的隐藏逻辑，同时确保AJAX请求完成后主动触发隐藏：

   // 保留原loading函数，但增加元素存在性判断
   function loading() {
       const loader = document.getElementById("loding-container");
       if (!loader) return;
       loader.classList.add("loading-display-none");
       setTimeout(() => {
           loader.classList.add("dsnone");
       }, 1500);
   };
   
   // 初始页面DOM加载完成后调用
   window.addEventListener('DOMContentLoaded', loading);
   
   // 在你的AJAX请求回调里，手动调用loading()隐藏加载屏
   // 示例AJAX回调（根据实际请求修改）
   function ajaxCallback() {
       // 更新DOM的代码...
       // 确保DOM更新完成后调用loading
       setTimeout(loading, 0);
   }
   

2. 如果AJAX返回的HTML包含加载屏代码，要确保只保留一个加载屏，或者在AJAX更新前移除旧的加载屏：

   // 在AJAX请求发送前，移除旧的加载屏（如果存在）
   const oldLoader = document.getElementById("loding-container");
   if (oldLoader) oldLoader.remove();
   

推荐封装成可复用的加载管理器，支持手动触发显示/隐藏，避免重复创建元素，完美适配AJAX场景：

1. HTML结构（页面仅保留一次） #

<div class="loading-container" id="loading-container" style="display: none;">
    <div class="loading-image">
        <img class="no-lazy" src="<?php echo $vitrin_options_loading_image; ?>" alt="loading">
    </div>
</div>

2. CSS样式（补充流畅动画） #

.loading-container {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.loading-image {
    position: relative;
}

/* 淡出动画 */
.loading-fade-out {
    opacity: 0;
    pointer-events: none;
}

/* 可选：加载图标旋转动画 */
.loading-image img {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

3. JavaScript封装（单例模式） #

class LoadingManager {
    constructor() {
        this.loader = document.getElementById("loading-container");
        if (!this.loader) {
            // 页面无加载容器时动态创建
            this.loader = this.createLoader();
        }
    }

    createLoader() {
        const container = document.createElement('div');
        container.id = 'loading-container';
        container.className = 'loading-container';
        container.innerHTML = `
            <div class="loading-image">
                <img class="no-lazy" src="<?php echo $vitrin_options_loading_image; ?>" alt="loading">
            </div>
        `;
        document.body.appendChild(container);
        return container;
    }

    // 显示加载屏
    show() {
        this.loader.style.display = 'flex';
        this.loader.classList.remove('loading-fade-out');
    }

    // 隐藏加载屏
    hide() {
        this.loader.classList.add('loading-fade-out');
        setTimeout(() => {
            this.loader.style.display = 'none';
        }, 500); // 与CSS transition时长对应
    }
}

// 全局实例化
const loadingManager = new LoadingManager();

// 初始页面加载完成后自动隐藏
window.addEventListener('DOMContentLoaded', () => {
    loadingManager.hide();
});

// 使用示例：
// 发送AJAX请求前显示加载屏
loadingManager.show();

// AJAX请求完成后隐藏加载屏
fetch('/your-api-url')
    .then(res => res.text())
    .then(html => {
        // 更新页面DOM
        document.getElementById('content').innerHTML = html;
        // 隐藏加载屏
        loadingManager.hide();
    })
    .catch(err => {
        console.error(err);
        loadingManager.hide(); // 出错场景也要确保加载屏隐藏
    });

方案优势 #

• 单例模式，避免重复创建加载容器
• 手动控制显示/隐藏，适配页面初始加载、AJAX请求等所有场景
• 流畅的过渡动画，提升用户体验
• 错误场景下也能确保加载屏正常隐藏

内容的提问来源于stack exchange，提问作者Amirhossein Yaldoughie