How to load content of `object` tag on page load?

Question

I have an object tag that contains an animated SVG. I show it when the beforeunload event is triggered. But it only requests the SVG when it is visible. Is there a way to load the content after the page is loaded and not when the element itself is visible?

This is my html code:

<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>

Answer 1

You can use

visibility: hidden;

instead of

display:none;