Bug Fix: The loading spinner was duplicated on refresh.

dist/js/splide-renderer.min.js

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

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.4
+ * Version  : 3.5.5
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -849,7 +849,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
-      !isClone && emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
     }
   }
   function style$1(prop, value, useContainer) {
@@ -1995,7 +1995,9 @@ function LazyLoad(Splide2, Components2, options) {
         const src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
         const srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
         if (src !== _img.src || srcset !== _img.srcset) {
-          const _spinner = create("span", options.classes.spinner, _img.parentElement);
+          const className = options.classes.spinner;
+          const parent = _img.parentElement;
+          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.4
+ * Version  : 3.5.5
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -845,7 +845,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
-      !isClone && emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
     }
   }
   function style$1(prop, value, useContainer) {
@@ -1991,7 +1991,9 @@ function LazyLoad(Splide2, Components2, options) {
         const src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
         const srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
         if (src !== _img.src || srcset !== _img.srcset) {
-          const _spinner = create("span", options.classes.spinner, _img.parentElement);
+          const className = options.classes.spinner;
+          const parent = _img.parentElement;
+          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.3
+ * Version  : 3.5.5
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2413,7 +2413,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           var srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
 
           if (src !== _img.src || srcset !== _img.srcset) {
-            var _spinner = create("span", options.classes.spinner, _img.parentElement);
+            var className = options.classes.spinner;
+            var parent = _img.parentElement;
+
+            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,CAwItG"}
+{"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"}

package-lock.json

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

package.json

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

@@ -11,7 +11,7 @@ import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
 import {
-  addClass,
+  addClass, child,
   create,
   display,
   getAttribute,
@@ -97,7 +97,10 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
         const srcset = getAttribute( _img, SRCSET_DATA_ATTRIBUTE );
 
         if ( src !== _img.src || srcset !== _img.srcset ) {
-          const _spinner = create( 'span', options.classes.spinner, _img.parentElement );
+          const className = options.classes.spinner;
+          const parent    = _img.parentElement;
+          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' );

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

@@ -18,9 +18,9 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide01 = new Splide( '#splide01', {
         perPage    : 1,
-        type       : 'fade',
+        // type       : 'fade',
         lazyLoad   : 'nearby',
-        cover      : true,
+        // cover      : true,
         rewind     : true,
         heightRatio: ( 9 / 16 ) / 2,
       } );
@@ -35,6 +35,17 @@ $settings = get_settings();
       } );
 
       splide02.mount();
+
+      let sig = 20;
+
+      splide01.on( 'moved', ( index ) => {
+        if ( index === splide01.length - 1 ) {
+          splide01.add( [
+            `<li class="splide__slide"><img data-splide-lazy="https://source.unsplash.com/random/960x540?sig=${ ++sig }"></li>`,
+            `<li class="splide__slide"><img data-splide-lazy="https://source.unsplash.com/random/960x540?sig=${ ++sig }"></li>`,
+          ] );
+        }
+      } );
     } );
   </script>
 </head>