Bug Fix: The number of images that lazy load images is one more than …

…intended.

Bug Fix: When the slider is looping and an image is just loaded simultaneously, the position unexpectedly jumps to the `index` that should be `dest`.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.0
+ * Version  : 3.2.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -869,7 +869,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   }
   function isWithin(from, distance) {
     let diff = abs(from - index);
-    if (!Splide2.is(SLIDE) && !isClone) {
+    if (!isClone && (options.rewind || Splide2.is(LOOP))) {
       diff = min(diff, Splide2.length - diff);
     }
     return diff <= distance;
@@ -1173,7 +1173,7 @@ function Move(Splide2, Components2, options) {
     removeAttribute(list, "style");
   }
   function reposition() {
-    if (!Components2.Drag.isDragging()) {
+    if (!isBusy() && !Components2.Drag.isDragging()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
       emit(EVENT_REPOSITIONED);
@@ -1958,7 +1958,7 @@ function LazyLoad(Splide2, Components2, options) {
           const _spinner = create("span", options.classes.spinner, _img.parentElement);
           setAttribute(_spinner, ROLE, "presentation");
           images.push({ _img, _Slide, src, srcset, _spinner });
-          display(_img, "none");
+          !_img.src && display(_img, "none");
         }
       });
     });
@@ -1972,7 +1972,8 @@ function LazyLoad(Splide2, Components2, options) {
   }
   function observe() {
     images = images.filter((data) => {
-      if (data._Slide.isWithin(Splide2.index, options.perPage * ((options.preloadPages || 1) + 1))) {
+      const distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
+      if (data._Slide.isWithin(Splide2.index, distance)) {
         return load(data);
       }
       return true;

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.0
+ * Version  : 3.2.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -865,7 +865,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   }
   function isWithin(from, distance) {
     let diff = abs(from - index);
-    if (!Splide2.is(SLIDE) && !isClone) {
+    if (!isClone && (options.rewind || Splide2.is(LOOP))) {
       diff = min(diff, Splide2.length - diff);
     }
     return diff <= distance;
@@ -1169,7 +1169,7 @@ function Move(Splide2, Components2, options) {
     removeAttribute(list, "style");
   }
   function reposition() {
-    if (!Components2.Drag.isDragging()) {
+    if (!isBusy() && !Components2.Drag.isDragging()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
       emit(EVENT_REPOSITIONED);
@@ -1954,7 +1954,7 @@ function LazyLoad(Splide2, Components2, options) {
           const _spinner = create("span", options.classes.spinner, _img.parentElement);
           setAttribute(_spinner, ROLE, "presentation");
           images.push({ _img, _Slide, src, srcset, _spinner });
-          display(_img, "none");
+          !_img.src && display(_img, "none");
         }
       });
     });
@@ -1968,7 +1968,8 @@ function LazyLoad(Splide2, Components2, options) {
   }
   function observe() {
     images = images.filter((data) => {
-      if (data._Slide.isWithin(Splide2.index, options.perPage * ((options.preloadPages || 1) + 1))) {
+      const distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
+      if (data._Slide.isWithin(Splide2.index, distance)) {
         return load(data);
       }
       return true;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
@@ -64,7 +64,8 @@
     "check:types": "tsc --noEmit",
     "jest": "jest --clearCache && jest",
     "eslint": "eslint src",
-    "stylelint": "npx stylelint --fix ./src/css/**/*.scss"
+    "stylelint": "npx stylelint --fix ./src/css/**/*.scss",
+    "beforecommit": "npm run eslint && npm run stylelint && npm run jest && npm run build:all"
   },
   "browserslist": [
     "> 5%",

src/js/components/LazyLoad/LazyLoad.ts

@@ -100,7 +100,7 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
           const _spinner = create( 'span', options.classes.spinner, _img.parentElement );
           setAttribute( _spinner, ROLE, 'presentation' );
           images.push( { _img, _Slide, src, srcset, _spinner } );
-          display( _img, 'none' );
+          ! _img.src && display( _img, 'none' );
         }
       } );
     } );
@@ -124,7 +124,9 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
    */
   function observe(): void {
     images = images.filter( data => {
-      if ( data._Slide.isWithin( Splide.index, options.perPage * ( ( options.preloadPages || 1 ) + 1 ) ) ) {
+      const distance = options.perPage * ( ( options.preloadPages || 1 ) + 1 ) - 1;
+
+      if ( data._Slide.isWithin( Splide.index, distance ) ) {
         return load( data );
       }
 

src/js/components/LazyLoad/test/nearby.test.ts

@@ -107,15 +107,15 @@ describe( 'LazyLoad in the `nearby` mode', () => {
     expect( images[ 3 ].src ).toBe( '' );
     expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull();
 
-    splide.go( 1 );
+    splide.go( 2 );
 
     expect( images[ 3 ].src ).toBe( `${ URL }/3.jpg` );
     expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
 
     expect( images[ 4 ].src ).toBe( '' );
     expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull();
 
-    splide.go( 2 );
+    splide.go( 3 );
 
     expect( images[ 4 ].src ).toBe( `${ URL }/4.jpg` );
     expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull();
@@ -129,10 +129,10 @@ describe( 'LazyLoad in the `nearby` mode', () => {
     const last2  = splide.Components.Slides.getAt( splide.length - 2 );
 
     expect( prev1.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 1 }.jpg` );
-    expect( prev2.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 2 }.jpg` );
+    expect( prev2.slide.querySelector( 'img' ).src ).toBe( '' );
 
     expect( last1.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 1 }.jpg` );
-    expect( last2.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 2 }.jpg` );
+    expect( last2.slide.querySelector( 'img' ).src ).toBe( '' );
   } );
 
   test( 'should not start loading an image if the slide is not close to the current location.', () => {

src/js/components/Move/Move.ts

@@ -77,7 +77,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * - iOS Safari emits window resize event while the user swipes the slider because of the bottom bar.
    */
   function reposition(): void {
-    if ( ! Components.Drag.isDragging() ) {
+    if ( ! isBusy() && ! Components.Drag.isDragging() ) {
       Components.Scroll.cancel();
       jump( Splide.index );
       emit( EVENT_REPOSITIONED );

src/js/components/Slides/Slide.ts

@@ -28,7 +28,7 @@ import {
   EVENT_SLIDE_KEYDOWN,
   EVENT_VISIBLE,
 } from '../../constants/events';
-import { FADE, SLIDE } from '../../constants/types';
+import { FADE, LOOP } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent } from '../../types';
@@ -262,7 +262,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   function isWithin( from: number, distance: number ): boolean {
     let diff = abs( from - index );
 
-    if ( ! Splide.is( SLIDE ) && ! isClone ) {
+    if ( ! isClone && ( options.rewind || Splide.is( LOOP ) ) ) {
       diff = min( diff, Splide.length - diff );
     }
 

src/js/components/Slides/test/slide.test.ts

@@ -276,4 +276,37 @@ describe( 'Slide', () => {
     splide.mount( { component } );
     expect( callback ).toHaveBeenCalled();
   } );
+
+  test( 'can check some slide is within the specified distance.', () => {
+    const splide = init( { perPage: 2, type: 'loop' } );
+    const { Slides } = splide.Components;
+    const Slide0 = Slides.getAt( 0 );
+    const Slide1 = Slides.getAt( 1 );
+    const Slide2 = Slides.getAt( 2 );
+    const Clone  = Slides.getAt( -1 );
+
+    expect( Slide0.isWithin( 0, 0 ) ).toBe( true );
+    expect( Slide0.isWithin( 0, 1 ) ).toBe( true );
+
+    expect( Slide1.isWithin( 0, 0 ) ).toBe( false );
+    expect( Slide1.isWithin( 0, 1 ) ).toBe( true );
+    expect( Slide1.isWithin( 0, 2 ) ).toBe( true );
+
+    expect( Slide2.isWithin( 0, 0 ) ).toBe( false );
+    expect( Slide2.isWithin( 0, 1 ) ).toBe( false );
+    expect( Slide2.isWithin( 0, 2 ) ).toBe( true );
+    expect( Slide2.isWithin( 0, 3 ) ).toBe( true );
+
+    expect( Slide0.isWithin( 2, 0 ) ).toBe( false );
+    expect( Slide0.isWithin( 2, 1 ) ).toBe( false );
+    expect( Slide0.isWithin( 2, 2 ) ).toBe( true );
+
+    expect( Slide1.isWithin( 2, 0 ) ).toBe( false );
+    expect( Slide1.isWithin( 2, 1 ) ).toBe( true );
+    expect( Slide1.isWithin( 2, 2 ) ).toBe( true );
+
+    expect( Clone.isWithin( 0, 0 ) ).toBe( false );
+    expect( Clone.isWithin( 0, 1 ) ).toBe( true );
+    expect( Clone.isWithin( 0, 2 ) ).toBe( true );
+  } );
 } );

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

@@ -17,9 +17,11 @@
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide01 = new Splide( '#splide01', {
-        perPage    : 2,
-        lazyLoad   : 'sequential',
+        perPage    : 1,
+        type       : 'fade',
+        lazyLoad   : 'nearby',
         cover      : true,
+        rewind     : true,
         heightRatio: ( 9 / 16 ) / 2,
       } );