Fixed loadScripts for browsers that don't support preload

README.md

@@ -66,6 +66,7 @@ What it does
   - Preserves rules like `@font-face`.
   - Preserves pseudo-selectors like `::before` or `:hover` for nodes that are on page.
   - Preserves media queries, but again rejects rules for DOM nodes that aren't in the page.
+  - Only retains keyframe animations for animations you are using on the page.
 * Minifies the resulting minimal CSS using [`CSSO`](https://github.com/css/csso). Embeds this into the markup of your HTML directly as an inline style tag.
 * Identifies the minimal fonts needed for the first render of the page, and preloads them using `<link rel='preload' as='font' type='font/woff2' href=''>`.
 * Removes all external script tags (typically your `main.hash.js`), and includes them instead as `<link rel='preload' as='script' href='main.hash.js' />`.

build/load-scripts.js

@@ -3,13 +3,32 @@
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 /* global document */
+var isPreloadSupported = function isPreloadSupported() {
+  // Based on https://gist.github.com/yoavweiss/b1f798bb2be4e671107b
+  try {
+    return document.createElement('link').relList.supports('preload');
+  } catch (e) {
+    return false;
+  }
+};
 
 module.exports = function () {
-  return Promise.all(Array.from(document.querySelectorAll('link[rel=preload][as=script]')).map(function (l) {
+  return !isPreloadSupported() ? Promise.resolve() : Promise.all(Array.from(document.querySelectorAll('link[rel=preload][as=script]')).map(function (l) {
     return l.getAttribute('href');
   }).map(function (href) {
     return new Promise(function (resolve) {
       var link = document.createElement('link');
+      link.addEventListener('load', function () {
+        console.log('loaded');
+        link.parentNode.removeChild(link);
+        resolve();
+      });
+      link.addEventListener('error', function (e) {
+        console.log('error', e);
+        link.parentNode.removeChild(link);
+        resolve();
+      });
+
       Object.entries({ rel: 'preload', as: 'script', href: href }).forEach(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
             attribute = _ref2[0],
@@ -18,11 +37,8 @@ module.exports = function () {
         return link.setAttribute(attribute, value);
       });
 
-      link.onload = function () {
-        link.parentNode.removeChild(link);
-        resolve();
-      };
       document.querySelector('head').appendChild(link);
+      console.log('appended');
     });
   }));
 };

src/load-scripts.js

@@ -1,17 +1,33 @@
 /* global document */
+const isPreloadSupported = () => {
+  // Based on https://gist.github.com/yoavweiss/b1f798bb2be4e671107b
+  try {
+    return document.createElement('link').relList.supports('preload');
+  } catch(e) {
+    return false;
+  }
+}
 
-module.exports = () => Promise.all(
+module.exports = () => !isPreloadSupported() ? Promise.resolve() : Promise.all(
   Array.from(document.querySelectorAll('link[rel=preload][as=script]'))
     .map(l => l.getAttribute('href'))
     .map(href => new Promise(resolve => {
       const link = document.createElement('link');
+      link.addEventListener('load', () => {
+        console.log('loaded');
+        link.parentNode.removeChild(link);
+        resolve();
+      });
+      link.addEventListener('error', (e) => {
+        console.log('error', e);
+        link.parentNode.removeChild(link);
+        resolve();
+      });
+
       Object.entries({ rel: 'preload', as: 'script', href })
         .forEach(([attribute, value]) => link.setAttribute(attribute, value));
 
-      link.onload = () => {
-        link.parentNode.removeChild(link);
-        resolve();
-      };
       document.querySelector('head').appendChild(link);
+      console.log('appended');
     }))
 );