js异步预加载网页

 
更多

js异步预加载文件。

/**
 * js异步并发预加载文件
 * @param pageList
 * @param onComplete
 */
function preloadPages(pageList, onComplete) {
    // 确保页面完全加载并展示后执行预加载
    window.addEventListener('load', () => {
        // 使用 Promise.all 来并发加载页面
        const fetchPromises = pageList.map(url =>
            fetch(url, {method: 'GET', mode: 'no-cors'})
                .then(response => {
                    if (response.ok || response.status === 0) {
                        // console.log(`预加载 ${url} 成功`);
                    } else {
                        console.warn(`预加载 ${url} 失败: ${response.status}`);
                    }
                })
                .catch(error => {
                    console.error(`无法预加载 ${url}: `, error);
                })
        );

        // 等待所有请求完成
        Promise.all(fetchPromises)
            .then(() => {
                console.log('所有页面已预加载');
                if (typeof onComplete === 'function') {
                    onComplete();  // 调用回调函数
                }
            })
            .catch(error => {
                console.error('预加载过程中出现错误:', error);
            });
    });
}

使用示例:在页面完全加载后,预加载 a.html 和 b.html

preloadPages(['a.html', 'b.tef', 'c.mp3', 'd.png']);
打赏

本文固定链接: https://www.cxy163.net/archives/2919 | 绝缘体

该日志由 绝缘体.. 于 2024年11月04日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: js异步预加载网页 | 绝缘体
关键字: , , , ,

js异步预加载网页:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter