当前位置：首页 > JavaScript

js实现load

2026-03-14 22:19:49JavaScript

JavaScript 实现页面加载的方法

在JavaScript中，实现页面加载可以通过多种方式完成，包括监听文档加载事件、动态加载资源等。以下是几种常见的方法：

监听 `DOMContentLoaded` 事件

DOMContentLoaded 事件在HTML文档完全加载和解析完成后触发，无需等待样式表、图像等外部资源加载完成。

document.addEventListener('DOMContentLoaded', function() {
    // 页面DOM加载完成后执行的代码
    console.log('DOM fully loaded and parsed');
});

监听 `load` 事件

load 事件在整个页面（包括样式表、图像等外部资源）完全加载后触发。

window.addEventListener('load', function() {
    // 页面所有资源加载完成后执行的代码
    console.log('All resources loaded');
});

动态加载脚本

通过动态创建 <script> 标签加载外部脚本，适用于按需加载资源。

function loadScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    document.head.appendChild(script);
}

loadScript('path/to/script.js', function() {
    console.log('Script loaded');
});

动态加载CSS

类似动态加载脚本，可以通过创建 <link> 标签加载CSS文件。

function loadCSS(url) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);
}

loadCSS('path/to/style.css');

使用 `Promise` 异步加载资源

通过 Promise 封装资源加载逻辑，便于处理异步操作。

js实现load

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

loadResource('path/to/script.js')
    .then(() => console.log('Resource loaded'))
    .catch(err => console.error('Error loading resource:', err));