如何在CSS背景图片加载完成后执行JavaScript代码

核心思路 #

通过监听窗口尺寸变化，结合getComputedStyle获取当前body生效的背景图URL，动态创建Image对象检测加载状态，确保每次窗口切换后，新的背景图加载完成再触发动画，同时避免重复检测已加载的图片。

实现代码 #

// 缓存已加载的背景图URL，避免重复检测
let loadedBgUrl = '';

// 检测背景图并触发动画的核心函数
function checkAndTriggerAnimation() {
    // 获取body当前生效的计算样式
    const bodyStyle = window.getComputedStyle(document.body);
    // 提取背景图URL（兼容不同浏览器的格式，去除url()的包裹符号）
    let bgUrl = bodyStyle.backgroundImage;
    bgUrl = bgUrl.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');

    // 若当前背景图已加载过，直接触发动画
    if (bgUrl === loadedBgUrl) {
        runAnimation();
        return;
    }

    // 创建Image实例加载目标背景图
    const img = new Image();
    img.src = bgUrl;
    img.onload = function() {
        loadedBgUrl = bgUrl;
        runAnimation();
    };
    // 可选：处理背景图加载失败的情况
    img.onerror = function() {
        console.error('背景图加载失败:', bgUrl);
    };
}

// 替换为你实际的动画逻辑
function runAnimation() {
    // 示例：给hero区域添加动画类
    document.querySelector('.hero').classList.add('fade-in');
}

// 页面初始加载时检测
window.addEventListener('DOMContentLoaded', checkAndTriggerAnimation);
// 窗口尺寸变化时重新检测（可选加防抖优化）
let resizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(checkAndTriggerAnimation, 200);
});

关键细节说明 #

• getComputedStyle可以精准获取当前媒体查询生效后的实际背景图URL，不管是小屏还是大屏的资源。
• 防抖处理resize事件，避免窗口拖动过程中频繁触发检测逻辑，提升性能。
• 缓存已加载的URL，防止同一背景图重复触发加载检测和动画。

内容的提问来源于stack exchange，提问作者hoo