Add native lazy loading callback

assets.json

@@ -1,3 +1,3 @@
 {
- "version": 1690813628192
+ "version": 1691082391092
 }

assets/scripts/config.js

@@ -29,9 +29,10 @@ const CSS_CLASS = Object.freeze({
  LOADED: 'is-loaded',
  READY: 'is-ready',
  FONTS_LOADED: 'fonts-loaded',
- LAZY_CONTAINER: 'c-lazy',
- LAZY_LOADED: '-lazy-loaded',
- // ...
+ IMAGE: "c-image",
+ IMAGE_LAZY_LOADED: "-lazy-loaded",
+ IMAGE_LAZY_LOADING: "-lazy-loading",
+ IMAGE_LAZY_ERROR: "-lazy-error",
 })
 
 // Custom js events

assets/scripts/globals.js

@@ -1,5 +1,6 @@
 import svg4everybody from 'svg4everybody';
 import { ENV } from './config';
+import { triggerLazyloadCallbacks } from './utils/image';
 
 // Dynamic imports for development mode only
 let gridHelper;
@@ -20,4 +21,9 @@ export default function () {
  * Add grid helper
  */
  gridHelper?.();
+
+ /**
+ * Trigger lazyload
+ */
+ triggerLazyloadCallbacks();
 }

assets/scripts/modules/Load.js

@@ -1,22 +1,35 @@
 import { module } from 'modujs';
 import modularLoad from 'modularload';
+import { resetLazyloadCallbacks, triggerLazyloadCallbacks } from "../utils/image";
 
 export default class extends module {
  constructor(m) {
  super(m);
  }
 
  init() {
- const load = new modularLoad({
+ this.load = new modularLoad({
  enterDelay: 0,
  transitions: {
  customTransition: {}
  }
  });
 
- load.on('loaded', (transition, oldContainer, newContainer) => {
+ this.load.on('loaded', (transition, oldContainer, newContainer) => {
  this.call('destroy', oldContainer, 'app');
  this.call('update', newContainer, 'app');
+
+ /**
+ * Trigger lazyload
+ */
+ triggerLazyloadCallbacks();
+ });
+
+ this.load.on("loading", () => {
+ /**
+ * Remove previous lazyload callbacks
+ */
+ resetLazyloadCallbacks();
  });
  }
 }

assets/scripts/modules/Scroll.js

@@ -1,5 +1,4 @@
 import { module } from 'modujs'
-import { lazyLoadImage } from '../utils/image'
 import LocomotiveScroll from 'locomotive-scroll'
 
 export default class extends module {
@@ -19,29 +18,6 @@ export default class extends module {
  // }
  }
 
- /**
- * Lazy load the related image.
- *
- * @see ../utils/image.js
- *
- * It is recommended to wrap your `<img>` into an element with the
- * CSS class name `.c-lazy`. The CSS class name modifier `.-lazy-loaded`
- * will be applied on both the image and the parent wrapper.
- *
- * ```html
- * <div class="c-lazy o-ratio u-4:3">
- * <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
- * </div>
- * ```
- *
- * @param {LocomotiveScroll} args - The Locomotive Scroll instance.
- */
- lazyLoad(args) {
- lazyLoadImage(args.target, null, () => {
- //callback
- })
- }
-
  scrollTo(params) {
  let { target, ...options } = params
 
@@ -53,6 +29,24 @@ export default class extends module {
  this.scroll?.scrollTo(target, options)
  }
 
+ /**
+ * Observe new scroll elements
+ *
+ * @param $newContainer (HTMLElement)
+ */
+ addScrollElements($newContainer) {
+ this.scroll?.addScrollElements($newContainer)
+ }
+
+ /**
+ * Unobserve scroll elements
+ *
+ * @param $oldContainer (HTMLElement)
+ */
+ removeScrollElements($oldContainer) {
+ this.scroll?.removeScrollElements($oldContainer)
+ }
+
  destroy() {
  this.scroll.destroy();
  }

assets/scripts/utils/html.js

@@ -4,76 +4,74 @@
  * @return {string} escaped string
  */
 
-const escapeHtml = str =>
- str.replace(/[&<>'"]/g, tag => ({
- '&': '&amp;',
- '<': '&lt;',
- '>': '&gt;',
- "'": '&#39;',
- '"': '&quot;'
- }[tag]))
-
+const escapeHtml = (str) =>
+ str.replace(
+ /[&<>'"]/g,
+ (tag) =>
+ ({
+ "&": "&amp;",
+ "<": "&lt;",
+ ">": "&gt;",
+ "'": "&#39;",
+ '"': "&quot;",
+ }[tag])
+ );
 
 /**
  * Unescape HTML string
  * @param {string} str - string to unescape
  * @return {string} unescaped string
  */
 
-const unescapeHtml = str =>
- str.replace('&amp;', '&')
- .replace('&lt;', '<')
- .replace('&gt;', '>')
- .replace('&#39;', "'")
- .replace('&quot;', '"')
-
+const unescapeHtml = (str) =>
+ str
+ .replace("&amp;", "&")
+ .replace("&lt;", "<")
+ .replace("&gt;", ">")
+ .replace("&#39;", "'")
+ .replace("&quot;", '"');
 
 /**
  * Get element data attributes
  * @param {HTMLElement} node - node element
  * @return {array} node data
  */
 
-const getNodeData = node => {
-
+const getNodeData = (node) => {
  // All attributes
- const attributes = node.attributes
+ const attributes = node.attributes;
 
  // Regex Pattern
- const pattern = /^data\-(.+)$/
+ const pattern = /^data\-(.+)$/;
 
  // Output
- const data = {}
+ const data = {};
 
  for (let i in attributes) {
  if (!attributes[i]) {
- continue
+ continue;
  }
 
  // Attributes name (ex: data-module)
- let name = attributes[i].name
+ let name = attributes[i].name;
 
  // This happens.
  if (!name) {
- continue
+ continue;
  }
 
- let match = name.match(pattern)
+ let match = name.match(pattern);
  if (!match) {
- continue
+ continue;
  }
 
  // If this throws an error, you have some
  // serious problems in your HTML.
- data[match[1]] = getData(node.getAttribute(name))
+ data[match[1]] = getData(node.getAttribute(name));
  }
 
  return data;
-
-}
-
-
-
+};
 
 /**
  * Parse value to data type.
@@ -83,58 +81,83 @@ const getNodeData = node => {
  * @return {mixed} value in its natural data type
  */
 
-const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/
-const getData = data => {
- if (data === 'true') {
- return true
+const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/;
+const getData = (data) => {
+ if (data === "true") {
+ return true;
  }
 
- if (data === 'false') {
- return false
+ if (data === "false") {
+ return false;
  }
 
- if (data === 'null') {
- return null
+ if (data === "null") {
+ return null;
  }
 
  // Only convert to a number if it doesn't change the string
- if (data === +data+'') {
- return +data
+ if (data === +data + "") {
+ return +data;
  }
 
  if (rbrace.test(data)) {
- return JSON.parse(data)
+ return JSON.parse(data);
  }
 
- return data
-}
-
+ return data;
+};
 
 /**
  * Returns an array containing all the parent nodes of the given node
  * @param {HTMLElement} $el - DOM Element
  * @return {array} parent nodes
  */
 
-const getParents = $el => {
-
+const getParents = ($el) => {
  // Set up a parent array
- let parents = []
+ let parents = [];
 
  // Push each parent element to the array
  for (; $el && $el !== document; $el = $el.parentNode) {
- parents.push($el)
+ parents.push($el);
  }
 
  // Return our parent array
- return parents
-}
+ return parents;
+};
+
+// https://gomakethings.com/how-to-get-the-closest-parent-element-with-a-matching-selector-using-vanilla-javascript/
+const queryClosestParent = ($el, selector) => {
+ // Element.matches() polyfill
+ if (!Element.prototype.matches) {
+ Element.prototype.matches =
+ Element.prototype.matchesSelector ||
+ Element.prototype.mozMatchesSelector ||
+ Element.prototype.msMatchesSelector ||
+ Element.prototype.oMatchesSelector ||
+ Element.prototype.webkitMatchesSelector ||
+ function (s) {
+ var matches = (
+ this.document || this.ownerDocument
+ ).querySelectorAll(s),
+ i = matches.length;
+ while (--i >= 0 && matches.item(i) !== this) {}
+ return i > -1;
+ };
+ }
 
+ // Get the closest matching element
+ for (; $el && $el !== document; $el = $el.parentNode) {
+ if ($el.matches(selector)) return $el;
+ }
+ return null;
+};
 
 export {
  escapeHtml,
  unescapeHtml,
  getNodeData,
  getData,
  getParents,
-}
+ queryClosestParent,
+};