如何在页面加载时加载“对象”标签的内容？答案

【问题标题】：How to load content of `object` tag on page load?如何在页面加载时加载“对象”标签的内容？
【发布时间】：2021-09-14 18:00:42
【问题描述】：

我有一个包含动画 SVG 的对象标签。我在触发beforeunload 事件时显示它。但它只在 SVG 可见时才请求它。有没有办法在页面加载后而不是在元素本身可见时加载内容？

这是我的html代码：

<div class="loader-container">
    <object data="/SVG.svg"></object>
</div>
<style>
    .loader-container {
        align-items: center;
        background: #fafafa;
        justify-content: center;
        height: 100%;
        width: 100%;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
    }
</style>
<script>
    jQuery(() => {
        window.addEventListener('beforeunload', () => {
            document.querySelector('.loader-container').style.display = 'flex'
        })
    })
</script>

【问题讨论】：

我怀疑这是使用对象标签的结果。尝试使用 img 标签或 embed 标签：stackoverflow.com/questions/4476526/…
我会使用它，但这是一个动画 SVG。它包含在 img 标签中使用时不会加载的脚本标签。
SVG 没有脚本标签，无论是否动画。所以这似乎是你真正的问题。但我可能是错的。
确实如此。您实际上可以在 SVG 文件中嵌入脚本标签。我用svgator.com 创建了一个。它为您提供了使用 css 执行此操作的选项。但这不是我的选择。

标签： javascript html dom html-object

【解决方案1】：

你可以使用

visibility: hidden;

而不是

display:none;

【讨论】：

它可以解决问题，但不确定它是否应该是解决方案。它只会阻止与其他元素的所有交互，这是我认为没有人想要的。
隐藏时可以将大小改为width:0 height:0。然后你可以在显示时将其重置为 100%...