preloading

src/js/index.js

@@ -1,2 +1,11 @@
-import './lights'
-import './lazy'
+import lights from './lights'
+import lazy from './lazy'
+import swup from './swup'
+
+document.addEventListener('DOMContentLoaded', () => {
+    lights()
+    lazy()
+    swup(()=> {
+        lazy()
+    })
+})

src/js/lazy.js

@@ -1,6 +1,6 @@
-import jQuery from 'jquery'
+import $ from 'jquery'
 
-jQuery(($) => {
+export default () => {
     const bottomOffset = 300
     const app = document.getElementById('app')
     let loading = false
@@ -35,4 +35,4 @@ jQuery(($) => {
 
     // Check initial page if they need loading
     load.bind(app)()
-})
+}

src/js/lights.js

@@ -1,4 +1,4 @@
-;((window) => {
+export default () => {
     // Lights
     const key = 'nicco.io:blog:lights'
     const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} '
@@ -22,9 +22,9 @@
     window.toggleLights = () => isDark() ? on() : off()
 
     // Focus scrolling
-    document.addEventListener('DOMContentLoaded', ()=> {
+    document.addEventListener('DOMContentLoaded', () => {
         const toFocus = document.querySelector('[data-focusme]')
         toFocus.tabIndex = '1'
         toFocus.focus({preventScroll: true})
     })
-})(window)
+}

src/js/swup.js

@@ -0,0 +1,11 @@
+import Swup from 'swup'
+import SwupPreloadPlugin from '@swup/preload-plugin';
+
+export default (fn) => {
+    const swup = new Swup({
+        plugins: [new SwupPreloadPlugin()],
+        containers: ['#app']
+    })
+
+    swup.on('contentReplaced', fn)
+}