如何在页面加载时提前加载object标签内的资源内容？

你遇到的问题是父级设置display: none后，元素不会被纳入浏览器渲染树，浏览器默认不会加载其子元素的关联外部资源，只有当元素切换为可见状态时才会发起资源请求，因此会出现在beforeunload触发时SVG还未加载的情况。

方案1：修改容器隐藏规则（改造成本最低） #

不要使用display: none隐藏容器，改为通过可见性、透明度属性实现隐藏，此时元素仍在渲染树中，浏览器会提前加载SVG资源：

.loader-container {
    align-items: center;
    background: #fafafa;
    justify-content: center;
    height: 100%;
    width: 100%;
    /* 替换原来的display: none */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

对应修改触发展示的JS逻辑即可：

jQuery(() => {
    window.addEventListener('beforeunload', () => {
        const loader = document.querySelector('.loader-container')
        loader.style.opacity = 1
        loader.style.visibility = 'visible'
        loader.style.pointerEvents = 'auto'
        loader.style.display = 'flex'
    })
})

方案2：添加资源预加载标签（无需修改原有逻辑） #

在页面<head>标签内添加预加载指令，主动告诉浏览器提前加载该SVG资源，不需要修改你现有的样式和JS逻辑：

<link rel="preload" href="/SVG.svg" as="image">

方案3：JS手动触发预加载 #

页面加载完成后主动请求SVG资源存入缓存，后续使用时直接读取缓存即可，只需在现有JS中新增预加载代码：

jQuery(() => {
    // 新增预加载逻辑
    const preloadSvg = new Image()
    preloadSvg.src = '/SVG.svg'

    window.addEventListener('beforeunload', () => {
        document.querySelector('.loader-container').style.display = 'flex'
    })
})

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