polyfilling [link rel=preload]


1.22.53 years ago4 years agoMinified + gzip package size for @digitalkaoz/preload-polyfill in KB


Preload Polyfill

it just works...

What & Why

preload seems the best async loading mechanism today...


some good reads:

Install with npm

npm install @digitalkaoz/preload-polyfill


This Polyfill supports the following types:

  • js
  • css
  • font
  • image
  • audio (not well tested)
  • document (not well tested)
  • embed (not well tested)
  • fetch (not well tested)
  • object (not well tested)
  • track (not well tested)
  • worker (not well tested)
  • video (not well tested)


Integration in your Page

the polyfill and the invoke script are seperated

    <script src="/dist/preload-polyfill.min.js"></script>
    <script src="/dist/preload-polyfill-invoke.min.js"></script>

additionally you need an inline script (for browsers that are preload capable, preloading stuff could be faster than loading an external sync script, and you would miss the load event)


Preloading Stuff

simply use it as follows:

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

Additional Features

beware those are not spec compliant features


those resources will be fetched non blocking, but executed first in order they appear

<link rel="preload" critical as="script" href="jquery.js" />


to preload fonts correctly you have to set a name property on the links

<link rel="preload" name="FontName" weight="bold" as="font" crossorigin type="font/woff2" href="font.woff2" />


those resources will only be fetched if browser understands es6

<link rel="preload" module as="script" href="app.es6.js" />


those resources will only be fetched if browser cant understand es6

<link rel="nomodule" as="script" href="app.legacy.js" />

AllScriptsExecuted Event

window.onload can be fired even if not all preloaded scripts are executed, therefore we dispatch an event AllScriptsExecuted which indicates all preloaded stuff is executed too.


$ npm start

now visit https://localhost:5000



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.