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