Nov
04
2024
js异步预加载网页
作者:
绝缘体.. 发布:
2024-11-04 17:18 分类:
未分类 阅读:
抢沙发
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']);
微信扫一扫,打赏作者吧~