Bug Fix: The loading spinner was duplicated on refresh.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.6
+ * Version  : 3.5.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.6
+ * Version  : 3.5.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1979,15 +1979,17 @@ function LazyLoad(Splide2, Components2, options) {
   let index = 0;
   function mount() {
     if (options.lazyLoad) {
-      on([EVENT_MOUNTED, EVENT_REFRESH], () => {
-        destroy();
-        init();
-      });
+      init();
+      on(EVENT_REFRESH, refresh);
       if (!isSequential) {
         on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED], observe);
       }
     }
   }
+  function refresh() {
+    destroy();
+    init();
+  }
   function init() {
     Components2.Slides.forEach((_Slide) => {
       queryAll(_Slide.slide, IMAGE_SELECTOR).forEach((_img) => {
@@ -1996,7 +1998,7 @@ function LazyLoad(Splide2, Components2, options) {
         if (src !== _img.src || srcset !== _img.srcset) {
           const className = options.classes.spinner;
           const parent = _img.parentElement;
-          const _spinner = child(parent, className) || create("span", className, parent);
+          const _spinner = child(parent, `.${className}`) || create("span", className, parent);
           setAttribute(_spinner, ROLE, "presentation");
           images.push({ _img, _Slide, src, srcset, _spinner });
           !_img.src && display(_img, "none");

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.6
+ * Version  : 3.5.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1975,15 +1975,17 @@ function LazyLoad(Splide2, Components2, options) {
   let index = 0;
   function mount() {
     if (options.lazyLoad) {
-      on([EVENT_MOUNTED, EVENT_REFRESH], () => {
-        destroy();
-        init();
-      });
+      init();
+      on(EVENT_REFRESH, refresh);
       if (!isSequential) {
         on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED], observe);
       }
     }
   }
+  function refresh() {
+    destroy();
+    init();
+  }
   function init() {
     Components2.Slides.forEach((_Slide) => {
       queryAll(_Slide.slide, IMAGE_SELECTOR).forEach((_img) => {
@@ -1992,7 +1994,7 @@ function LazyLoad(Splide2, Components2, options) {
         if (src !== _img.src || srcset !== _img.srcset) {
           const className = options.classes.spinner;
           const parent = _img.parentElement;
-          const _spinner = child(parent, className) || create("span", className, parent);
+          const _spinner = child(parent, `.${className}`) || create("span", className, parent);
           setAttribute(_spinner, ROLE, "presentation");
           images.push({ _img, _Slide, src, srcset, _spinner });
           !_img.src && display(_img, "none");

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.5.6
+ * Version  : 3.5.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2394,10 +2394,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function mount() {
       if (options.lazyLoad) {
-        on([EVENT_MOUNTED, EVENT_REFRESH], function () {
-          destroy();
-          init();
-        });
+        init();
+        on(EVENT_REFRESH, refresh);
 
         if (!isSequential) {
           on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED], observe);
@@ -2405,6 +2403,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
+    function refresh() {
+      destroy();
+      init();
+    }
+
     function init() {
       Components2.Slides.forEach(function (_Slide) {
         queryAll(_Slide.slide, IMAGE_SELECTOR).forEach(function (_img) {
@@ -2415,7 +2418,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
             var className = options.classes.spinner;
             var parent = _img.parentElement;
 
-            var _spinner = child(parent, className) || create("span", className, parent);
+            var _spinner = child(parent, "." + className) || create("span", className, parent);
 
             setAttribute(_spinner, ROLE, "presentation");
             images.push({

dist/types/components/LazyLoad/LazyLoad.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LazyLoad.d.ts","sourceRoot":"","sources":["LazyLoad.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAYjE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIjD;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;CACvD;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,cAAc,CAAC;IACvB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA2ItG"}
+{"version":3,"file":"LazyLoad.d.ts","sourceRoot":"","sources":["LazyLoad.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAYjE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIjD;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;CACvD;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,cAAc,CAAC;IACvB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CAiJtG"}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.5.6",
+  "version": "3.5.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.5.6",
+  "version": "3.5.7",
   "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

@@ -76,10 +76,8 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
    */
   function mount(): void {
     if ( options.lazyLoad ) {
-      on( [ EVENT_MOUNTED, EVENT_REFRESH ], () => {
-        destroy();
-        init();
-      } );
+      init();
+      on( EVENT_REFRESH, refresh );
 
       if ( ! isSequential ) {
         on( [ EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED ], observe );
@@ -87,6 +85,14 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
     }
   }
 
+  /**
+   * Called when the slider is refreshed.
+   */
+  function refresh(): void {
+    destroy();
+    init();
+  }
+
   /**
    * Finds images that contain specific data attributes.
    */
@@ -99,7 +105,7 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
         if ( src !== _img.src || srcset !== _img.srcset ) {
           const className = options.classes.spinner;
           const parent    = _img.parentElement;
-          const _spinner  = child( parent, className ) || create( 'span', className, parent );
+          const _spinner  = child( parent, `.${ className }` ) || create( 'span', className, parent );
 
           setAttribute( _spinner, ROLE, 'presentation' );
           images.push( { _img, _Slide, src, srcset, _spinner } );