如何用BOM实现页面的预加载？

/**
 * 预加载一张图片
 * @param {string} url 图片的URL
 * @returns {Promise<HTMLImageElement>} 返回一个Promise，解析为加载成功的图片元素
 */
function preloadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
        img.onload = () => {
            console.log(`图片预加载成功: ${url}`);
            resolve(img);
        };
        img.onerror = (e) => {
            console.error(`图片预加载失败: ${url}`, e);
            reject(new Error(`Failed to load image: ${url}`));
        };
    });
}

// 示例用法：
// 假设用户鼠标悬停在某个商品卡片上时，预加载其详情页的大图
const productCard = document.getElementById('product-card-123');
if (productCard) {
    productCard.addEventListener('mouseenter', () => {
        preloadImage('/images/product-detail-123-hero.jpg')
            .then(img => {
                // 图片已在缓存中，可以做些什么，比如将其添加到DOM中
                // console.log('图片已准备好！', img);
            })
            .catch(error => {
                // 处理预加载失败的情况
            });
    }, { once: true }); // 只触发一次
}

// 或者，在页面空闲时预加载下一页的背景图
document.addEventListener('DOMContentLoaded', () => {
    // 简单判断网络是否良好，避免在差网络下过度预加载
    if (navigator.connection && navigator.connection.effectiveType !== '2g' && navigator.connection.effectiveType !== '3g') {
        preloadImage('/images/next-page-background.webp');
    }
});

/**
 * 预加载JSON数据
 * @param {string} url API接口的URL
 * @returns {Promise<any>} 返回一个Promise，解析为加载成功的JSON数据
 */
async function preloadJsonData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(`JSON数据预加载成功: ${url}`, data);
        // 通常我们会将预加载的数据存储在某个全局变量或状态管理中
        return data;
    } catch (error) {
        console.error(`JSON数据预加载失败: ${url}`, error);
        throw error; // 抛出错误以便调用方处理
    }
}

// 示例用法：
let productDetailCache = {}; // 一个简单的缓存对象

// 在用户点击“查看更多”按钮前，预加载热门商品的详细数据
const viewMoreBtn = document.getElementById('view-more-hot-products');
if (viewMoreBtn) {
    viewMoreBtn.addEventListener('click', async () => {
        // 假设这里会跳转到商品列表页，我们预加载第一个商品的详情
        const productId = 'prod-xyz-123';
        if (!productDetailCache[productId]) {
            try {
                const data = await preloadJsonData(`/api/products/${productId}`);
                productDetailCache[productId] = data;
                // 现在数据已经在缓存里了，当用户真正点击该商品时，可以直接从这里取
            } catch (error) {
                // 处理错误
            }
        }
        // ... 继续正常跳转或显示逻辑
    });
}

/**
 * 动态插入link标签进行资源预加载或预取
 * @param {string} url 资源的URL
 * @param {string} asType 资源的类型（如'image', 'script', 'style', 'document'等）
 * @param {'preload' | 'prefetch'} relType 关联类型
 */
function dynamicLinkPreload(url, asType, relType = 'preload') {
    if (!document.head.querySelector(`link[href="${url}"][rel="${relType}"]`)) { // 避免重复添加
        const link = document.createElement('link');
        link.rel = relType;
        link.as = asType;
        link.href = url;
        // 对于跨域资源，如果需要CORS，可能还需要link.crossOrigin = 'anonymous';
        document.head.appendChild(link);
        console.log(`动态添加 ${relType} 链接: ${url} (as: ${asType})`);
    }
}

// 示例用法：
// 假设用户即将进入一个需要大量CSS和JS的复杂页面
const nextNavLink = document.getElementById('go-to-complex-page');
if (nextNavLink) {
    nextNavLink.addEventListener('mouseenter', () => {
        dynamicLinkPreload('/css/complex-page-styles.css', 'style', 'preload');
        dynamicLinkPreload('/js/complex-page-bundle.js', 'script', 'preload');
        // 如果是整个HTML页面，用prefetch
        dynamicLinkPreload('/complex-page.html', 'document', 'prefetch');
    }, { once: true });
}