❤
npm
Sign UpSign In

js.polyfill.preload.onload

1.0.0 • Public • Published

tests coverage maintainability

Preload Onload Polyfill

A <link rel="preload"> Polyfill. Call the onload event, also in unsupported Browser.

Usage

npm install js.polyfill.preload.onload

Module (src)

import Preload from 'js.polyfill.preload.onload';
 
const preload = new Preload();
preload.check() || preload.update();
 

Compiled (dist)

Inject the Polyfill into <head> within a <script> element.

<head>
    <style type="text/css">
        /* critical CSS */
    </style> 
    <link rel="preload" src="css/style.css" as="style" onload="this.rel='stylesheet'" type="text/css">
    <noscript>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </noscript>
    <script type="text/javascript">
        /* Preload Onload Polyfill from dist directory */
    </script> 
</head>

Note: The Polyfill should be injected inline to save the extra request.

Example

Inline Critical CSS and <link rel="preload"> injected main Stylesheet. With noscript fallback and Polyfill to support browser who don't understand rel=preload.

Note: This Example is also used within the dev environment. Run npm start from the repository main directory and open http://localhost:8090 in your Browser.

Inline (critical) Style in <head>

<style>
    body {
    font-family: Arial, "Open Sans", sans-serif;
    font-size: 16px;
    color: #012345;
    background-color: #abcdef;
    outline: 1em htmlsolid #012345;
    }
 
    header,
    main {
        display: block;
        padding: 1em 2em;
    }
</style> 

Injected preload style css/style.css in <head>

<link
    href="css/style.css"
    rel="preload" 
    as="style"
    onload='this.rel="stylesheet"'
    type="text/css">
 
body {
    color: #abcdef;
    background-color: #012345;
    transition: all 4s ease-in;
    outline: 1em solid #abcdef;
}
 
...

Note: This style is also injected as fallback within the <noscript> element in <head>.

<noscript>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</noscript>

Support

The Polyfill enable <link rel="preload"> support (e.g. for stylesheets) in browser (e.g. Firefox or IE11) which currently not support this` attribute.

Tested with MSIE 11, Edge 17, Firefox 60 and Chrome 72.

Readme

Keywords

Package Sidebar

Install

npm i js.polyfill.preload.onload

Repository

github.com/exiguus/js.polyfill.preload.onload

Homepage

exiguus.github.io/js.polyfill.preload.onload/

Weekly Downloads

5

Version

1.0.0

License

MIT

Unpacked Size

1.15 MB

Total Files

62

Last publish

Collaborators

  • exiguus
Try on RunKit
Report malware