CODEWITHSUNDEEP
javascripthtml
Asperger
Asperger

Reputation: 3222

Edge preloading ALL html media resources? Slow page loading

I have a function on the bottom of my page which checks if my page loaded all resources. On Chrome and Firefox it works fine but on Edge it takes so long that its "unbelievable". For example if I have many html5 audio sources on my site it takes incredibly long till my document.readyState reached "complete". However, removing those html5 media elements (normal audio tags) makes the script reach the "complete" state instantly.

Same can be said with video. The loading in other browsers, even mobile chrome is really fast, in Edge it seems to preload the entire thing, like literally ever resource even if I dont currently need it.

Here are the bones of my page loading script:

   function initLoader() {
        var pageLoading;

        // Does some stuff

        document.onreadystatechange = function() {
            pageLoading = document.readyState;

            if (pageLoading == 'interactive') {
                // Loading

            } else if (pageLoading == 'complete') {
                // Loading done
            }
        }
    }

Media I use:

  // Full screen, video is 1920 x 1080. 4 MB. 30 seconds long.

  <video playsinline autoplay muted loop>
    <source src='MyVideo.mp4' type='video/mp4'>
  </video>

  // MP3 audio with max quality. I have like 20 of those audio tags on my page. All around 4-6 MB. 3 minutes long.

  <audio>
    <source src='MyAudio.mp3' type='audio/mpeg'>
  </audio>

I am aware that the files in question are really big but this shouldnt be a problem, in chrome and firefox it works really fast, its really just Microsoft Edge that is failing on me.

Why is Edge acting so strange, making my page loading take ages? How can I fix this?

Edge runs on windows 10.

Upvotes: 0

Views: 939

Answers (2)

WIPocket
WIPocket

Reputation: 78

Some elements support an async=true attribute. Also, you can place the elements taking long after the page loads by javascript: first have a container <div id='videocontainer1'></div> and replace it when the page loads window.addEventListener('load',function(){ document.getElementById("videocontainer1").outerHTML = "<video playsinline autoplay muted loop> <source src='MyVideo.mp4' type='video/mp4'> </video>"; }); and the same for your audio.

Upvotes: 0

Asperger
Asperger

Reputation: 3222

Just like its predecessors Edge doesnt support the preload attribute. It also seems that regardless of the circumstances, Edge downloads everything it sees. So if you have 100 media elements, edge downloads all of them. Crazy if you ask me.

My solution would be to remove the src or add an empty string to it and apply the url to the media dynamically when needed.

Upvotes: 1

Related Questions