当前位置：首页 > JavaScript

js实现页面加载

2026-02-28 22:05:20JavaScript

页面加载的基本实现

在JavaScript中，页面加载可以通过监听DOMContentLoaded或load事件来实现。DOMContentLoaded事件在HTML文档完全加载和解析后触发，无需等待样式表、图像等资源加载完成。load事件则在整个页面及所有依赖资源（如图片、样式表）加载完成后触发。

document.addEventListener('DOMContentLoaded', function() {
    // DOM已完全加载和解析，可以操作DOM元素
    console.log('DOM fully loaded and parsed');
});

window.addEventListener('load', function() {
    // 页面及所有资源已加载完成
    console.log('All resources finished loading');
});

动态加载内容

可以通过异步请求动态加载内容，例如使用fetchAPI从服务器获取数据并更新页面。

document.addEventListener('DOMContentLoaded', function() {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            document.getElementById('content').innerHTML = data.content;
        })
        .catch(error => console.error('Error:', error));
});

延迟加载资源

对于性能优化，可以使用defer或async属性延迟脚本加载，或通过Intersection Observer实现图片懒加载。

js实现页面加载

// 图片懒加载示例
document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = document.querySelectorAll('img[data-src]');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    lazyImages.forEach(img => observer.observe(img));
});

加载状态提示

可以在页面加载过程中显示加载状态，提升用户体验。

document.addEventListener('DOMContentLoaded', function() {
    const loader = document.getElementById('loader');
    loader.style.display = 'block';

    setTimeout(() => {
        loader.style.display = 'none';
    }, 2000); // 模拟加载延迟
});

使用Promise管理加载顺序

如果需要确保多个资源按顺序加载，可以使用Promise链式调用。

js实现页面加载

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);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    loadScript('script1.js')
        .then(() => loadScript('script2.js'))
        .then(() => console.log('All scripts loaded'))
        .catch(error => console.error('Script loading failed:', error));
});

性能优化

通过减少DOM操作、合并请求、使用缓存等方式优化页面加载性能。

// 使用requestAnimationFrame优化DOM操作
document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('.animate');
    function update() {
        elements.forEach(el => {
            el.style.transform = `translateY(${window.scrollY * 0.1}px)`;
        });
        requestAnimationFrame(update);
    }
    update();
});

错误处理

确保在加载过程中捕获并处理错误，避免页面崩溃。

window.addEventListener('error', function(event) {
    console.error('Error:', event.message);
    // 显示友好的错误提示
    document.getElementById('error-message').textContent = '加载失败，请刷新重试';
});

通过以上方法，可以实现高效、可靠的页面加载逻辑，提升用户体验和性能。