How to Preload a Page Using HTML5

How can I preload a page using HTML5?

Prefetching is included in a W3C spec under the name Resource Hints. It is implemented in Firefox, Chrome, IE 11, Edge, Opera after 12.1, and the Android Browser from 4.4.4, see the caniuse prefetch page for more and up-to-date details.

Also see the caniuse and spec pages for related technologies (supported browsers afterwards are retrieved from caniuse and up-to-date as of September 2015):

Prerendering caniuse / spec (IE 11, Edge, Chrome, Opera)
Preconnecting caniuse / spec (Firefox, Chrome 46, Opera 33)
DNS Prefetching caniuse / spec (IE9 (see note below), IE10, every other browser except Opera Mini and perhaps iOS Safari and the Android Browser)

IE 9 implemented DNS prefetching only but called it "prefetch" (caution!). Chrome for a while (at least as far as 2013) only did prerendering and DNS prefetching. IE11 implements lazyload, for images; Microsoft has tried to get it in the spec but so far it isn't. iCab is stated to have been the first browser to implement prefetching, although this behaviour was automatic, not controlled by the markup.

Historical background

The Mozilla Application Suite, and later, Firefox, implement the spec (the spec is actually based on Mozilla's early implementation of prefetching, which was somewhat based on the Link: header specified in RFC 2068 which has now been superseeded by RFC 2616 [which does not reference the Link: header]. See this old version of the docs () for more detail.) As per the documentation on MDN ():

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.
The browser looks for either an HTML <link> or an HTTP Link: header with a relation type of either next or prefetch.

So the syntax is:

<link rel="prefetch" href="/path/to/prefetch" />

You can also use the Link: HTTP header:

Link: </page/to/prefetch>; rel=prefetch

Or a <meta> to simulate that same HTTP header:

<meta http-equiv="Link" content="</page/to/prefetch>; rel=prefetch">

Note that the next relation can also be used, but its main function is to indicate the "next" page in the navigation, so you should not use it for resources or unrelated information. Prefetching is also performed on HTTPS connections.

iCab

iCab seems to () have implemented an early prefetching around 2001. iCab apparently prefetched all links to content pages (not resources), not following any hint the developer would have left in the markup.

How to preload a html page or a video before it loads

This will allow preload and autoplay the video on a new page

/index.html

<a href="/video.html" target="_blank">Click to play</a>

/video.html

<video width="320" height="240" autoplay muted preload="auto">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

or if you just want to open the video on the same page like a modal you'll need javascript and css

/index.html

<style>
    #modal{
        display:none;
        position:absolute;
        z-index:10;
        top:20;
        left: 50%;
        transform: translate(-50%, 0);
        background: black;
    }
</style>
<body>
    <button id="playBtn">Click to play</button>
    <div id="modal">
    <video id="vid" width="320" height="240" autoplay muted preload="auto">
      <source src="video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    </div>
    <script>
        document.querySelector('#playBtn').addEventListener('click',function(){
            document.querySelector('#modal').style.display = 'block';
            document.getElementById('vid').play();
        })
  </script>
</body>

Safari and chrome browsers blocks video autoplay unless it is muted.

How can I preload a page using HTML5?

Also see the caniuse and spec pages for related technologies (supported browsers afterwards are retrieved from caniuse and up-to-date as of September 2015):

Prerendering caniuse / spec (IE 11, Edge, Chrome, Opera)
Preconnecting caniuse / spec (Firefox, Chrome 46, Opera 33)
DNS Prefetching caniuse / spec (IE9 (see note below), IE10, every other browser except Opera Mini and perhaps iOS Safari and the Android Browser)

Historical background

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.
The browser looks for either an HTML <link> or an HTTP Link: header with a relation type of either next or prefetch.

So the syntax is:

<link rel="prefetch" href="/path/to/prefetch" />

You can also use the Link: HTTP header:

Link: </page/to/prefetch>; rel=prefetch

Or a <meta> to simulate that same HTTP header:

<meta http-equiv="Link" content="</page/to/prefetch>; rel=prefetch">

iCab

HTML5 video preload solution

Event loadeddata means :

The first frame of the media has finished loading.

readyState === 4 means :

Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.

You have chances that loadeddata is triggered but readyState is not 4.
Since loadeddata is triggered only once, the video won't ever play.

You should try to add logs to verify this assumption.

What I would try is the following :

Use <video> with autoplay
Listen for the playing event on the video to start transition
Listen for the ended event on the video to hide it

Reference for attributes, events and readyState:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Video
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

how to use html5 link preload js resource

Update :

<link rel="preload" href="main.js" as="script">

This means that the browser will preload the JavaScript file, but not actually use it yet.

To use it, you could do this when desired:

var preloadedScript = document.createElement("script");
preloadedScript.src = "main.js";
document.body.appendChild(preloadedScript);

This is useful when you want to preload a script, but then defer executing it until exactly when you need it.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Preloading HTML5 video for smooth AJAX page transitions

Thanks to Bart.

var loaded = false;

//If the video is loaded...
example.addEventListener("canplaythrough", function() {

  //Make sure it only fires once
  if (loaded == false) {
    loaded = true;

    //Fade in the content
    $('#wrapper').fadeIn(2500);

  }
});

How to start preloading HTML5 video from a certain time

You can start by loading only the metadata, then, once it is done set the currentTime to 00:15 and then set the preload attribute to auto.

Just to be sure the data starts to load, you can trigger video.play(); video.pause().

var vid = document.querySelector('video');

vid.onloadstart = function() {

  log('loadstart at ' + this.currentTime);

};

vid.onloadedmetadata = function() {

  log('loadedmetadata at ' + this.currentTime);

  vid.currentTime = 15;

  vid.setAttribute('preload', "auto");

  vid.play();

  vid.pause();

};

vid.onloadeddata = function() {

  log('loadeddata at ' + this.currentTime);

};

function log(data) {

  document.querySelector('#log').innerHTML += '<p>' + data + '</p>';

}

#log {

  position: fixed;

  bottom: 0;

  right: 1em;

  color: #FFF;

  background-color: rgba(0, 0, 0, .5)

}

<video controls="true" preload="metadata" height="170">

  <source type="video/ogg" src="http://media.w3.org/2010/05/bunny/movie.ogv">

  <source type="video/mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4">

</video>

<div id="log"></div>

How to Preload a Page Using HTML5

How can I preload a page using HTML5?

Historical background

iCab

How to preload a html page or a video before it loads

How can I preload a page using HTML5?

Historical background

iCab

HTML5 video preload solution

how to use html5 link preload js resource

Preloading HTML5 video for smooth AJAX page transitions

How to start preloading HTML5 video from a certain time

Related Topics

Leave a reply