feat(core): lazyPreloadPrevNext option to preload prev/next images (#6544)

* feat: lazyPreloadPrevNext option to preload prev/next images
* preload lint fixes

Author: Carnoisseur1979

src/components-shared/params-list.js

@@ -83,6 +83,7 @@ const paramsList = [
   'slidePrevClass',
   'wrapperClass',
   'lazyPreloaderClass',
+  'lazyPreloadPrevNext',
   'runCallbacksOnInit',
   'observer',
   'observeParents',

src/core/core.js

@@ -30,7 +30,7 @@ import checkOverflow from './check-overflow/index.js';
 
 import defaults from './defaults.js';
 import moduleExtendParams from './moduleExtendParams.js';
-import { processLazyPreloader } from '../shared/process-lazy-preloader.js';
+import { processLazyPreloader, preload } from '../shared/process-lazy-preloader.js';
 
 const prototypes = {
   eventsEmitter,
@@ -581,6 +581,7 @@ class Swiper {
         });
       }
     });
+    preload(swiper);
 
     // Init Flag
     swiper.initialized = true;

src/core/defaults.js

@@ -127,6 +127,7 @@ export default {
   slidePrevClass: 'swiper-slide-prev',
   wrapperClass: 'swiper-wrapper',
   lazyPreloaderClass: 'swiper-lazy-preloader',
+  lazyPreloadPrevNext: 0,
 
   // Callbacks
   runCallbacksOnInit: true,

src/core/update/updateActiveIndex.js

@@ -1,3 +1,5 @@
+import preload from '../../shared/process-lazy-preloader.js';
+
 export function getActiveIndexByTranslate(swiper) {
   const { slidesGrid, params } = swiper;
   const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
@@ -84,6 +86,9 @@ export default function updateActiveIndex(newActiveIndex) {
     previousIndex,
     activeIndex,
   });
+
+  preload(swiper);
+
   swiper.emit('activeIndexChange');
   swiper.emit('snapIndexChange');
   if (previousRealIndex !== realIndex) {

src/shared/process-lazy-preloader.js

@@ -7,3 +7,27 @@ export const processLazyPreloader = (swiper, imageEl) => {
     if (lazyEl) lazyEl.remove();
   }
 };
+
+const unlazy = (swiper, index) => {
+  const imageEl = swiper.slides[index].querySelector('loading="lazy"');
+  if (imageEl) imageEl.removeAttribute('loading');
+};
+
+export const preload = (swiper) => {
+  if (!swiper || swiper.destroyed || !swiper.params) return;
+  let amount = swiper.params.lazyPreloadPrevNext;
+  const len = swiper.slides.length;
+  if (!len || !amount || amount < 0) return;
+  amount = Math.min(amount, len);
+  const active = swiper.activeSlide;
+  if (swiper.params.rewind) {
+    for (let i = active - amount; i <= active + amount; i += 1) {
+      const reali = ((i % len) + len) % len;
+      if (reali !== active) unlazy(swiper, reali);
+    }
+  } else {
+    for (let i = Math.max(active - amount, 0); i <= Math.min(active + amount, len - 1); i += 1) {
+      if (i !== active) unlazy(swiper, i);
+    }
+  }
+};

src/types/swiper-options.d.ts

@@ -820,6 +820,13 @@ export interface SwiperOptions {
    */
   lazyPreloaderClass?: string;
 
+  /**
+   * Number of next and previous slides to preload. Only applicable if using lazy loading.
+   *
+   * @default 0
+   */
+  lazyPreloadPrevNext?: number;
+
   /**
    * Object with a11y parameters or boolean `true` to enable with default settings.
    *

src/vue/swiper-vue.d.ts

@@ -318,6 +318,10 @@ declare const Swiper: DefineComponent<
       type: StringConstructor;
       default: undefined;
     };
+    lazyPreloadPrevNext: {
+      type: NumberConstructor;
+      default: undefined;
+    };
     runCallbacksOnInit: {
       type: BooleanConstructor;
       default: undefined;

src/vue/swiper.js

@@ -106,6 +106,7 @@ const Swiper = {
     slidePrevClass: { type: String, default: undefined },
     wrapperClass: { type: String, default: undefined },
     lazyPreloaderClass: { type: String, default: undefined },
+    lazyPreloadPrevNext: { type: Number, default: undefined },
     runCallbacksOnInit: { type: Boolean, default: undefined },
     observer: { type: Boolean, default: undefined },
     observeParents: { type: Boolean, default: undefined },