From cf7efd008b6b633bb492f47f0270a0138b8eaa5f Mon Sep 17 00:00:00 2001
From: ipesic <pesic.ivan@feg.eu>
Date: Wed, 24 Jul 2024 11:35:38 +0200
Subject: [PATCH] feat(toggle-preloading): add param to disable preloading

---
 src/components-shared/params-list.mjs |  1 +
 src/core/core.mjs                     | 40 +++++++++++++++------------
 src/core/defaults.mjs                 |  3 ++
 src/shared/process-lazy-preloader.mjs |  4 +--
 src/swiper-vue.d.ts                   |  4 +++
 src/types/swiper-options.d.ts         |  7 +++++
 src/vue/swiper.mjs                    |  1 +
 7 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/components-shared/params-list.mjs b/src/components-shared/params-list.mjs
index dc6272961..bcddf1c7f 100644
--- a/src/components-shared/params-list.mjs
+++ b/src/components-shared/params-list.mjs
@@ -89,6 +89,7 @@ const paramsList = [
   'slidePrevClass',
   'slideBlankClass',
   'wrapperClass',
+  'lazyPreload',
   'lazyPreloaderClass',
   'lazyPreloadPrevNext',
   'runCallbacksOnInit',
diff --git a/src/core/core.mjs b/src/core/core.mjs
index 65032a40d..f60b93fc2 100644
--- a/src/core/core.mjs
+++ b/src/core/core.mjs
@@ -392,11 +392,13 @@ class Swiper {
       swiper.setBreakpoint();
     }
 
-    [...swiper.el.querySelectorAll('[loading="lazy"]')].forEach((imageEl) => {
-      if (imageEl.complete) {
-        processLazyPreloader(swiper, imageEl);
-      }
-    });
+    if (swiper.params.lazyPreload) {
+      [...swiper.el.querySelectorAll('[loading="lazy"]')].forEach((imageEl) => {
+        if (imageEl.complete) {
+          processLazyPreloader(swiper, imageEl);
+        }
+      });
+    }
 
     swiper.updateSize();
     swiper.updateSlides();
@@ -604,19 +606,23 @@ class Swiper {
 
     // Attach events
     swiper.attachEvents();
-    const lazyElements = [...swiper.el.querySelectorAll('[loading="lazy"]')];
-    if (swiper.isElement) {
-      lazyElements.push(...swiper.hostEl.querySelectorAll('[loading="lazy"]'));
-    }
-    lazyElements.forEach((imageEl) => {
-      if (imageEl.complete) {
-        processLazyPreloader(swiper, imageEl);
-      } else {
-        imageEl.addEventListener('load', (e) => {
-          processLazyPreloader(swiper, e.target);
-        });
+
+    if (swiper.params.lazyPreload) {
+      const lazyElements = [...swiper.el.querySelectorAll('[loading="lazy"]')];
+      if (swiper.isElement) {
+        lazyElements.push(...swiper.hostEl.querySelectorAll('[loading="lazy"]'));
       }
-    });
+      lazyElements.forEach((imageEl) => {
+        if (imageEl.complete) {
+          processLazyPreloader(swiper, imageEl);
+        } else {
+          imageEl.addEventListener('load', (e) => {
+            processLazyPreloader(swiper, e.target);
+          });
+        }
+      });
+    }
+
     preload(swiper);
 
     // Init Flag
diff --git a/src/core/defaults.mjs b/src/core/defaults.mjs
index 740a3d622..cf73dd6eb 100644
--- a/src/core/defaults.mjs
+++ b/src/core/defaults.mjs
@@ -131,6 +131,9 @@ export default {
   slideNextClass: 'swiper-slide-next',
   slidePrevClass: 'swiper-slide-prev',
   wrapperClass: 'swiper-wrapper',
+
+  // Lazy Preload
+  lazyPreload: true,
   lazyPreloaderClass: 'swiper-lazy-preloader',
   lazyPreloadPrevNext: 0,
 
diff --git a/src/shared/process-lazy-preloader.mjs b/src/shared/process-lazy-preloader.mjs
index d2d36167c..a94b8f9d1 100644
--- a/src/shared/process-lazy-preloader.mjs
+++ b/src/shared/process-lazy-preloader.mjs
@@ -1,5 +1,5 @@
 export const processLazyPreloader = (swiper, imageEl) => {
-  if (!swiper || swiper.destroyed || !swiper.params) return;
+  if (!swiper || swiper.destroyed || !swiper.params || !swiper.params.lazyPreload) return;
   const slideSelector = () => (swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`);
   const slideEl = imageEl.closest(slideSelector());
   if (slideEl) {
@@ -28,7 +28,7 @@ const unlazy = (swiper, index) => {
 };
 
 export const preload = (swiper) => {
-  if (!swiper || swiper.destroyed || !swiper.params) return;
+  if (!swiper || swiper.destroyed || !swiper.params || !swiper.params.lazyPreload) return;
   let amount = swiper.params.lazyPreloadPrevNext;
   const len = swiper.slides.length;
   if (!len || !amount || amount < 0) return;
diff --git a/src/swiper-vue.d.ts b/src/swiper-vue.d.ts
index 785043619..086362730 100644
--- a/src/swiper-vue.d.ts
+++ b/src/swiper-vue.d.ts
@@ -327,6 +327,10 @@ declare const Swiper: DefineComponent<
       type: StringConstructor;
       default: undefined;
     };
+    lazyPreload: {
+      type: BooleanConstructor
+      default: undefined
+    },
     lazyPreloaderClass: {
       type: StringConstructor;
       default: undefined;
diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
index 7a9791093..a7e880641 100644
--- a/src/types/swiper-options.d.ts
+++ b/src/types/swiper-options.d.ts
@@ -856,6 +856,13 @@ export interface SwiperOptions {
    */
   wrapperClass?: string;
 
+  /**
+   * Automatically enables lazy loading on images and adds a preloader element. Set to 'false' to disable
+   *
+   * @default true
+   */
+  lazyPreload?: boolean;
+
   /**
    * CSS class name of lazy preloader
    *
diff --git a/src/vue/swiper.mjs b/src/vue/swiper.mjs
index bfe4be6ed..c66f83126 100644
--- a/src/vue/swiper.mjs
+++ b/src/vue/swiper.mjs
@@ -109,6 +109,7 @@ const Swiper = {
     slideNextClass: { type: String, default: undefined },
     slidePrevClass: { type: String, default: undefined },
     wrapperClass: { type: String, default: undefined },
+    lazyPreload: { type: Boolean, default: undefined },
     lazyPreloaderClass: { type: String, default: undefined },
     lazyPreloadPrevNext: { type: Number, default: undefined },
     runCallbacksOnInit: { type: Boolean, default: undefined },