Check external file loading with JS

Question

Check external file loading with JS

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

2

My home page has a video as a background, but sometimes the video takes a long time to load. In this situation I thought about creating a loading before the page was displayed, my question is how can I check with jquery/javascript if a file (video) has already been loaded completely and then display the whole page.

The video is a local file

<video id="video" autoplay loop muted>
    <source src="/public/video/capa_video.mp4" type="video/mp4">
</video>

In my page I'm using the plugin fullpage js , so in my file .js I already have the ready of jquery .

$(document).ready(function() { ... });

How can I display a load effect before the document loads (images, videos, fonts, etc.)?

javascript jquery

asked by anonymous 10.02.2017 / 14:27

3 answers

NewtonJson.Parse with quotation marks in the middle How to use the pattern attribute?

score 3 · Answer 1

According to some examples I found on the web, only using the window.onload event to hide the div load is not always enough, because on slower connections, the video may not be ready for execution when such event is fired.

The most practical way I found this site / a>:

window.addEventListener('load', function() {
    var video = document.querySelector('#video');
    var preloader = document.querySelector('.preloader');

    function checkLoad() {
        if (video.readyState === 4) {
            preloader.parentNode.removeChild(preloader);
        } else {
            setTimeout(checkLoad, 100);
        }
    }

    checkLoad();
}, false);

When the checkLoad function is executed in the window.load event, however, if the video is still not ready enough, it checks 100 ms later with the setTimeout function.

Verifying the status of the video, in the video.readyState === 4 case, is based on the table below, taken from this site . If 4 is returned, sufficient data is already available - and the connection speed is high enough - then the video can run to the end without interruptions.

score 2 · Answer 2

onload only runs after all page content is loaded.

I tested it with a video following the Marconi link for Jbueno's response.

Follow the example:

window.onload=function()
{	 document.getElementById("loading").style.display='none';
}

    #loading{
	color:#fff; 
	background-color:#000; 
	width:100%; 
	height:100%; 
	position:absolute; 
	top:0; 
	left:0;
	z-index:9999;
	}

<div id="loading">Carregando...</div>

Página carregada.
<video width="400" controls>
  <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"type="video/mp4">
  Your browser does not support HTML5 video.
</video>

score 1 · Answer 3

One way to do this with video, in a more rustic way, is to check its status, and when the status is 4 , it means that it has been loaded completely:

var video = document.getElementById('video');

var interval = setInterval(function(){ 
   if (video.readyState === 4) {
      clearInterval(interval);
      document.getElementById('status').innerHTML = 'Carregado!';
   }
}, 500);

<video width="320" height="240" controls id="video">
  <source src="http://www.w3schools.com/tags/movie.mp4"type="video/mp4">
  Your browser does not support the video tag.
</video>

<p id="status"></p>