feat(toggle-preloading): add param to disable preloading

Author: ipesic

src/components-shared/params-list.mjs

@@ -89,6 +89,7 @@ const paramsList = [
   'slidePrevClass',
   'slideBlankClass',
   'wrapperClass',
+  'lazyPreload',
   'lazyPreloaderClass',
   'lazyPreloadPrevNext',
   'runCallbacksOnInit',

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

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,
 

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;

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;

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
    *

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 },