当前位置：首页 > JavaScript

js实现页面加载

2026-04-03 22:32:25JavaScript

页面加载的基本实现

使用原生JavaScript实现页面加载效果，可以通过监听DOMContentLoaded和load事件来控制加载流程。DOMContentLoaded事件在HTML文档完全加载和解析后触发，无需等待样式表、图像等外部资源完成加载。load事件在所有资源（如图片、脚本）加载完成后触发。

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

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

显示加载动画

在页面加载过程中，可以显示一个加载动画，提升用户体验。通常会在页面顶部添加一个进度条或旋转图标，加载完成后隐藏。

// 显示加载动画
function showLoader() {
    document.getElementById('loader').style.display = 'block';
}

// 隐藏加载动画
function hideLoader() {
    document.getElementById('loader').style.display = 'none';
}

document.addEventListener('DOMContentLoaded', showLoader);
window.addEventListener('load', hideLoader);

对应的HTML结构：

<div id="loader" style="display: none;">加载中...</div>

动态加载内容

对于需要异步加载的内容，可以使用fetch或XMLHttpRequest从服务器获取数据，并在数据加载完成后更新页面。

js实现页面加载

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

延迟加载图片

为了提高页面加载速度，可以对图片进行延迟加载（Lazy Load），即当图片进入可视区域时才加载。

document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = document.querySelectorAll('img[data-src]');

    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.getAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => {
        imageObserver.observe(img);
    });
});

对应的HTML结构：

js实现页面加载

<img data-src="image.jpg" alt="延迟加载的图片">

预加载关键资源

对于关键资源（如CSS、JavaScript或字体文件），可以使用<link rel="preload">提前加载，减少页面渲染时间。

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">

通过JavaScript动态预加载：

const preloadResource = (url, as) => {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.href = url;
    link.as = as;
    document.head.appendChild(link);
};

preloadResource('styles.css', 'style');
preloadResource('script.js', 'script');

错误处理与重试机制

在加载资源时，可能会遇到网络问题或资源不可用的情况，可以通过错误处理和重试机制提高鲁棒性。

function loadResource(url, retries = 3, delay = 1000) {
    return new Promise((resolve, reject) => {
        const attempt = (remainingRetries) => {
            fetch(url)
                .then(response => {
                    if (!response.ok) throw new Error('加载失败');
                    resolve(response);
                })
                .catch(error => {
                    if (remainingRetries > 0) {
                        setTimeout(() => attempt(remainingRetries - 1), delay);
                    } else {
                        reject(error);
                    }
                });
        };
        attempt(retries);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    loadResource('https://api.example.com/data')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('最终加载失败:', error));
});