2

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>
TheWhiteFang
  • 745
  • 5
  • 16
  • I suspect this is a result of using the object tag. Try using the img tag or embed tag instead: https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files – Emil Karlsson Sep 14 '21 at 09:05
  • I would use that but this is an animated SVG. It contains script tags which won't be loaded if used inside img tag. – TheWhiteFang Sep 14 '21 at 09:20
  • SVGs do not have script tags, animated or not. So that seems to be your real problem. But I could be wrong. – Emil Karlsson Sep 14 '21 at 09:25
  • They do. You can actually embed script tags inside an SVG file. I used https://www.svgator.com/ to create one. It gives you an option of doing it with css. But it was not an option for me. – TheWhiteFang Sep 14 '21 at 09:30

1 Answers1

0

You can use

visibility: hidden;

instead of

display:none;
Kemal Kaplan
  • 932
  • 8
  • 21
  • It will do the trick but not sure if it should be the solution. It will just block all the interaction with other elements, which is something I assume no one wants. – TheWhiteFang Sep 14 '21 at 12:43
  • 1
    you can change the size to width:0 height:0 when it is hidden. Then you can reset it to 100% when it is shown... – Kemal Kaplan Sep 14 '21 at 12:45