Loaders (wip)

assets/scripts/loaders/fonts.js

@@ -0,0 +1,61 @@
+const loadFont = (fontName, fontStyle, fontWeight) => {
+    return new Promise(resolve => {
+
+        let loop = null
+
+        const clearLoop = () => {
+            if (loop) {
+                clearInterval(loop)
+                loop = null
+            }
+        }
+
+        const tryToLoadFont = () => {
+            let hasLoaded = false
+
+            try {
+                hasLoaded = document.fonts.check(`${fontStyle} ${fontWeight} 16px ${fontName}`)
+            } catch (e) {
+                console.info(`CSS font loading API error with ${fontName} ${fontStyle} ${fontWeight}`, e)
+                clearLoop()
+                resolve()
+            }
+
+            if (hasLoaded) {
+                console.info(`${fontName} ${fontStyle} ${fontWeight} loaded`)
+                clearLoop()
+                resolve()
+            }
+        }
+
+        loop = setInterval(tryToLoadFont, 500)
+    })
+}
+
+const fontsLoader = async (fonts, callback) => {
+
+    if (!fonts.length) {
+        return
+    }
+
+    const fontFaceObservers = []
+
+    let observer
+    fonts.forEach((font) => {
+        observer = loadFont(font.name, font.style, font.weight)
+        fontFaceObservers.push(observer)
+    })
+
+    try {
+        await Promise.all(fontFaceObservers)
+        callback?.()
+    } catch (e) {
+        console.warn('Some critical font are not available:', e)
+    }
+}
+
+
+export {
+    loadFont,
+    fontsLoader
+}

assets/scripts/loaders/images.js

@@ -0,0 +1,151 @@
+const LAZY_LOADED_IMAGES = []
+const LOADED_IMAGES = []
+
+/**
+ * Get an image meta data
+ *
+ * @param {HTMLImageElement}    $img   - The image element.
+ * @return {object}             The given image meta data
+ */
+
+const getImageMetadata = $img => ({
+    url: $img.src,
+    width: $img.naturalWidth,
+    height: $img.naturalHeight,
+    ratio: $img.naturalWidth / $img.naturalHeight,
+})
+
+/**
+ * Load the given image.
+ *
+ * @param {string}  url         - The URI to lazy load into $el.
+ * @param {object}  options     - An object of options
+ * @return {void}
+ */
+
+const loadImage = (url, options = {}) => {
+    return new Promise((resolve, reject) => {
+
+        let loadedImage = LOADED_IMAGES.find(image => image.url === url)
+
+        if (loadedImage) {
+            resolve({
+                ...loadedImage,
+                ...options
+            })
+        } else {
+            const $img = new Image()
+
+            if (options.crossOrigin) {
+                $img.crossOrigin = options.crossOrigin
+            }
+
+            const loadCallback = () => {
+                const result = {
+                    element: $img,
+                    ...getImageMetadata($img),
+                    ...options
+                }
+                LOADED_IMAGES.push(result)
+                resolve(result)
+            }
+
+            if ($img.decode) {
+                $img.src = url
+                $img.decode().then(loadCallback).catch(e => {
+                    reject(e)
+                })
+            } else {
+                $img.onload = loadCallback
+                $img.onerror = (e) => {
+                    reject(e)
+                }
+                $img.src = url
+            }
+        }
+
+    })
+}
+
+/**
+ * Lazy load the given image.
+ *
+ * @param {HTMLImageElement} $el      - The image element.
+ * @param {?string}          url      - The URI to lazy load into $el.
+ *     If falsey, the value of the `data-src` attribute on $el will be used as the URI.
+ * @param {?function}        callback - A function to call when the image is loaded.
+ */
+
+const lazyLoadImage = async ($el, url, callback) => {
+    let src = url ? url : $el.dataset.src
+
+    let loadedImage = LAZY_LOADED_IMAGES.find(image => image.url === src)
+
+    if (!loadedImage) {
+        loadedImage = await loadImage(src)
+
+        if (!loadedImage.url) {
+            return
+        }
+
+        LAZY_LOADED_IMAGES.push(loadedImage)
+    }
+
+    if ($el.src === src) {
+        return
+    }
+
+    if ($el.tagName === 'IMG') {
+        $el.src = loadedImage.url
+    } else {
+        $el.style.backgroundImage = `url(${loadedImage.url})`
+    }
+
+    requestAnimationFrame(() => {
+        let lazyParent = $el.closest('.c-lazy')
+
+        if (lazyParent) {
+            lazyParent.classList.add('-lazy-loaded')
+            lazyParent.style.backgroundImage = ''
+        }
+
+        $el.classList.add('-lazy-loaded')
+
+        callback?.()
+    })
+}
+
+/**
+ * Preload images that contains data-preload attribute.
+ *
+ * @param {?function}        callback - A function to call when all images are loaded.
+ */
+
+const preloadImages = callback => {
+    const $imagesToLoad = document.querySelectorAll('img[data-preload]')
+
+    if (!$imagesToLoad.length) {
+        callback?.()
+        return
+    }
+
+    const promises = []
+
+    $imagesToLoad.forEach($image => {
+        const url = $image.dataset.src
+        const promise = lazyLoadImage($image, url)
+        promises.push(promise)
+    })
+
+    Promise.all(promises).then(() => {
+        callback?.()
+    })
+}
+
+
+export {
+    getImageMetadata,
+    loadImage,
+    lazyLoadImage,
+    preloadImages
+}

assets/scripts/loaders/stylesheets.js

@@ -0,0 +1,64 @@
+const loadStylesheet = $styleSheet => {
+    return new Promise(resolve => {
+
+        let loop = null
+
+        const clearLoop = () => {
+            if (loop) {
+                clearInterval(loop)
+                loop = null
+            }
+        }
+
+        const checkStyleSheetLoading = () => {
+
+            let hasLoaded = false
+
+            try {
+                hasLoaded = $styleSheet.getAttribute('data-is-loaded') == 'true'
+            } catch (e) {
+                console.info(`Error with the styleSheet ${$styleSheet}`, e)
+                clearLoop()
+                resolve()
+            }
+
+            if (hasLoaded) {
+                console.info('This stylesheet is loaded', $styleSheet)
+                clearLoop()
+                resolve()
+            }
+        }
+
+        loop = setInterval(checkStyleSheetLoading, 100)
+    })
+}
+
+
+const styleSheetsLoader = async ($styleSheets, callback) => {
+
+    if (!$styleSheets.length) {
+        console.log('Uh oh ! You need to select a <link> element')
+        return
+    }
+
+    const styleSheetObservers = []
+
+    let observer
+    $styleSheets.forEach($styleSheet => {
+        observer = loadStylesheet($styleSheet)
+        styleSheetObservers.push(observer)
+    })
+
+    try {
+        await Promise.all(styleSheetObservers)
+        callback?.()
+    } catch (e) {
+        console.warn('Some critical font are not available:', e)
+    }
+}
+
+
+export {
+    loadStylesheet,
+    styleSheetsLoader
+}