等待加载 js 实现

实现等待加载的 JavaScript 方法

方法一：使用 window.onload 事件

window.onload = function() {
    // 页面完全加载后执行的操作
    console.log('所有资源加载完成');
};

方法二：使用 DOMContentLoaded 事件

document.addEventListener('DOMContentLoaded', function() {
    // DOM 结构加载完成后执行的操作
    console.log('DOM 加载完成');
});

方法三：动态检测元素存在

function waitForElement(selector, callback) {
    const element = document.querySelector(selector);
    if (element) {
        callback(element);
    } else {
        setTimeout(() => waitForElement(selector, callback), 100);
    }
}

waitForElement('#targetElement', function(el) {
    console.log('目标元素已加载', el);
});

方法四：Promise 结合 MutationObserver

function elementReady(selector) {
    return new Promise((resolve) => {
        const el = document.querySelector(selector);
        if (el) return resolve(el);

        const observer = new MutationObserver(() => {
            const el = document.querySelector(selector);
            if (el) {
                observer.disconnect();
                resolve(el);
            }
        });

        observer.observe(document.documentElement, {
            childList: true,
            subtree: true
        });
    });
}

elementReady('.dynamic-content').then(el => {
    console.log('动态内容已加载', el);
});

加载动画实现示例

基础加载动画

function showLoader() {
    document.body.insertAdjacentHTML('beforeend', `
        <div id="loader" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        ">
            <div class="spinner"></div>
        </div>
    `);
}

function hideLoader() {
    const loader = document.getElementById('loader');
    if (loader) loader.remove();
}

// 使用示例
showLoader();
window.addEventListener('load', hideLoader);

CSS 旋转动画

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

异步资源加载检测

检测图片加载

function loadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

loadImage('example.jpg')
    .then(img => document.body.appendChild(img))
    .catch(() => console.error('图片加载失败'));

检测脚本加载

function loadScript(url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

loadScript('https://example.com/plugin.js')
    .then(() => console.log('脚本加载成功'))
    .catch(() => console.error('脚本加载失败'));

这些方法可以根据不同场景选择使用，从简单的页面加载事件到复杂的动态元素检测都能覆盖。对于现代Web应用，推荐使用Promise和MutationObserver的组合方案，它们提供了更精细的控制能力。