Fix #867.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.11
+ * Version  : 4.0.12
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -2403,19 +2403,30 @@ function LazyLoad(Splide2, Components2, options) {
       emit = _EventInterface12.emit;
 
   var isSequential = options.lazyLoad === "sequential";
-  var events = [EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED];
+  var events = [EVENT_MOVED, EVENT_SCROLLED];
   var entries = [];
 
   function mount() {
     if (options.lazyLoad) {
       init();
       on(EVENT_REFRESH, init);
-      isSequential || on(events, check);
     }
   }
 
   function init() {
     empty(entries);
+    register();
+
+    if (isSequential) {
+      loadNext();
+    } else {
+      off(events);
+      on(events, check);
+      check();
+    }
+  }
+
+  function register() {
     Components2.Slides.forEach(function (Slide) {
       queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
         var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
@@ -2430,7 +2441,6 @@ function LazyLoad(Splide2, Components2, options) {
         }
       });
     });
-    isSequential && loadNext();
   }
 
   function check() {

dist/js/splide.esm.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.11
+ * Version  : 4.0.12
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -2398,19 +2398,30 @@ function LazyLoad(Splide2, Components2, options) {
       emit = _EventInterface12.emit;
 
   var isSequential = options.lazyLoad === "sequential";
-  var events = [EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED];
+  var events = [EVENT_MOVED, EVENT_SCROLLED];
   var entries = [];
 
   function mount() {
     if (options.lazyLoad) {
       init();
       on(EVENT_REFRESH, init);
-      isSequential || on(events, check);
     }
   }
 
   function init() {
     empty(entries);
+    register();
+
+    if (isSequential) {
+      loadNext();
+    } else {
+      off(events);
+      on(events, check);
+      check();
+    }
+  }
+
+  function register() {
     Components2.Slides.forEach(function (Slide) {
       queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
         var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
@@ -2425,7 +2436,6 @@ function LazyLoad(Splide2, Components2, options) {
         }
       });
     });
-    isSequential && loadNext();
   }
 
   function check() {

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.11
+ * Version  : 4.0.12
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -2396,19 +2396,30 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         emit = _EventInterface12.emit;
 
     var isSequential = options.lazyLoad === "sequential";
-    var events = [EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED];
+    var events = [EVENT_MOVED, EVENT_SCROLLED];
     var entries = [];
 
     function mount() {
       if (options.lazyLoad) {
         init();
         on(EVENT_REFRESH, init);
-        isSequential || on(events, check);
       }
     }
 
     function init() {
       empty(entries);
+      register();
+
+      if (isSequential) {
+        loadNext();
+      } else {
+        off(events);
+        on(events, check);
+        check();
+      }
+    }
+
+    function register() {
       Components2.Slides.forEach(function (Slide) {
         queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
           var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
@@ -2423,7 +2434,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           }
         });
       });
-      isSequential && loadNext();
     }
 
     function check() {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@splidejs/splide",
-  "version": "4.0.11",
+  "version": "4.0.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@splidejs/splide",
-      "version": "4.0.11",
+      "version": "4.0.12",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.18.13",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "4.0.11",
+  "version": "4.0.12",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/LazyLoad/LazyLoad.ts

@@ -1,7 +1,6 @@
 import { CLASS_LOADING } from '../../constants/classes';
 import {
   EVENT_LAZYLOAD_LOADED,
-  EVENT_MOUNTED,
   EVENT_MOVED,
   EVENT_REFRESH,
   EVENT_RESIZE,
@@ -60,7 +59,7 @@ type LazyLoadEntry = [ HTMLImageElement, SlideComponent, HTMLSpanElement ];
 export function LazyLoad( Splide: Splide, Components: Components, options: Options ): LazyLoadComponent {
   const { on, off, bind, emit } = EventInterface( Splide );
   const isSequential = options.lazyLoad === 'sequential';
-  const events       = [ EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED ];
+  const events       = [ EVENT_MOVED, EVENT_SCROLLED ];
 
   /**
    * Stores data of images.
@@ -74,17 +73,31 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
     if ( options.lazyLoad ) {
       init();
       on( EVENT_REFRESH, init );
-      isSequential || on( events, check );
     }
   }
 
   /**
-   * Finds images to register entries.
-   * Note that spinner can be already available because of `refresh()`.
+   * Initializes the component and start loading images.
+   * Be aware that `refresh` also calls this method.
    */
   function init() {
     empty( entries );
+    register();
+
+    if ( isSequential ) {
+      loadNext();
+    } else {
+      off( events );
+      on( events, check );
+      check();
+    }
+  }
 
+  /**
+   * Finds images and register them as entries with creating spinner elements.
+   * Note that spinner can be already available because of `refresh()`.
+   */
+  function register(): void {
     Components.Slides.forEach( Slide => {
       queryAll<HTMLImageElement>( Slide.slide, IMAGE_SELECTOR ).forEach( img => {
         const src    = getAttribute( img, SRC_DATA_ATTRIBUTE );
@@ -100,8 +113,6 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
         }
       } );
     } );
-
-    isSequential && loadNext();
   }
 
   /**

src/js/test/php/examples/lazyLoad.php

@@ -17,7 +17,7 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide01 = new Splide( '#splide01', {
-        perPage    : 2,
+        perPage    : 1,
         // type       : 'fade',
         lazyLoad   : 'nearby',
         // cover      : true,