feat: move new Lazy module to the Core

scripts/build-config.js

@@ -11,7 +11,6 @@ export const modules = envBuildModules || [
   'scrollbar',
   'parallax',
   'zoom',
-  'lazy',
   'controller',
   'a11y',
   'history',

src/components-shared/params-list.js

@@ -88,6 +88,7 @@ const paramsList = [
   'slidePrevClass',
   'slideDuplicatePrevClass',
   'wrapperClass',
+  'lazyPreloaderClass',
   'runCallbacksOnInit',
   'observer',
   'observeParents',
@@ -106,7 +107,6 @@ const paramsList = [
   'hashNavigation',
   'history',
   'keyboard',
-  'lazy',
   'mousewheel',
   '_navigation',
   '_pagination',

src/copy/package.json

@@ -32,7 +32,6 @@
     "./css/hash-navigation": "./modules/hash-navigation/hash-navigation.min.css",
     "./css/history": "./modules/history/history.min.css",
     "./css/keyboard": "./modules/keyboard/keyboard.min.css",
-    "./css/lazy": "./modules/lazy/lazy.min.css",
     "./css/manipulation": "./modules/manipulation/manipulation.min.css",
     "./css/mousewheel": "./modules/mousewheel/mousewheel.min.css",
     "./css/navigation": "./modules/navigation/navigation.min.css",
@@ -57,7 +56,6 @@
     "./less/hash-navigation": "./modules/hash-navigation/hash-navigation.less",
     "./less/history": "./modules/history/history.less",
     "./less/keyboard": "./modules/keyboard/keyboard.less",
-    "./less/lazy": "./modules/lazy/lazy.less",
     "./less/manipulation": "./modules/manipulation/manipulation.less",
     "./less/mousewheel": "./modules/mousewheel/mousewheel.less",
     "./less/navigation": "./modules/navigation/navigation.less",
@@ -82,7 +80,6 @@
     "./scss/hash-navigation": "./modules/hash-navigation/hash-navigation.scss",
     "./scss/history": "./modules/history/history.scss",
     "./scss/keyboard": "./modules/keyboard/keyboard.scss",
-    "./scss/lazy": "./modules/lazy/lazy.scss",
     "./scss/manipulation": "./modules/manipulation/manipulation.scss",
     "./scss/mousewheel": "./modules/mousewheel/mousewheel.scss",
     "./scss/navigation": "./modules/navigation/navigation.scss",

src/core/core.less

@@ -1,5 +1,8 @@
 :root {
   --swiper-theme-color: @themeColor;
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  */
 }
 .swiper,
 swiper-container {
@@ -184,3 +187,40 @@ swiper-slide {
     height: var(--swiper-centered-offset-after);
   }
 }
+
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper:not(.swiper-watch-progress),
+swiper-container:not(.swiper-watch-progress),
+.swiper-watch-progress .swiper-slide-visible {
+  .swiper-lazy-preloader {
+    animation: swiper-preloader-spin 1s infinite linear;
+  }
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/core/core.scss

@@ -1,6 +1,9 @@
 @at-root {
   :root {
     --swiper-theme-color: #{$themeColor};
+    /*
+    --swiper-preloader-color: var(--swiper-theme-color);
+    */
   }
 }
 .swiper,
@@ -186,3 +189,40 @@ swiper-slide {
     height: var(--swiper-centered-offset-after);
   }
 }
+
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper:not(.swiper-watch-progress),
+swiper-container:not(.swiper-watch-progress),
+.swiper-watch-progress .swiper-slide-visible {
+  .swiper-lazy-preloader {
+    animation: swiper-preloader-spin 1s infinite linear;
+  }
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/core/defaults.js

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

src/core/events/index.js

@@ -6,6 +6,7 @@ import onTouchEnd from './onTouchEnd.js';
 import onResize from './onResize.js';
 import onClick from './onClick.js';
 import onScroll from './onScroll.js';
+import onLoad from './onLoad.js';
 
 let dummyEventAttached = false;
 function dummyEventListener() {}
@@ -58,6 +59,9 @@ const events = (swiper, method) => {
   } else {
     swiper[swiperMethod]('observerUpdate', onResize, true);
   }
+
+  // Images loader
+  el[domMethod]('load', swiper.onLoad, { capture: true });
 };
 
 function attachEvents() {
@@ -74,6 +78,7 @@ function attachEvents() {
   }
 
   swiper.onClick = onClick.bind(swiper);
+  swiper.onLoad = onLoad.bind(swiper);
 
   if (support.touch && !dummyEventAttached) {
     document.addEventListener('touchstart', dummyEventListener);

src/core/events/onLoad.js

@@ -0,0 +1,11 @@
+import $ from '../../shared/dom.js';
+
+export default function onLoad(e) {
+  const swiper = this;
+  const slideSelector = () => (swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`);
+  const slideEl = e.target.closest(slideSelector());
+  if (slideEl) {
+    $(slideEl).find(`.${swiper.params.lazy.preloaderClass}`).remove();
+  }
+  swiper.update();
+}

src/types/modules/public-api.d.ts

@@ -10,7 +10,6 @@ export * from './effect-cards';
 export * from './hash-navigation';
 export * from './history';
 export * from './keyboard';
-export * from './lazy';
 export * from './mousewheel';
 export * from './navigation';
 export * from './pagination';

src/types/swiper-class.d.ts

@@ -15,7 +15,6 @@ import { CardsEffectMethods } from './modules/effect-cards';
 import { HashNavigationMethods } from './modules/hash-navigation';
 import { HistoryMethods } from './modules/history';
 import { KeyboardMethods } from './modules/keyboard';
-import { LazyMethods } from './modules/lazy';
 import { MousewheelMethods } from './modules/mousewheel';
 import { NavigationMethods } from './modules/navigation';
 import { PaginationMethods } from './modules/pagination';
@@ -448,7 +447,6 @@ interface Swiper extends SwiperClass<SwiperEvents> {
   hashNavigation: HashNavigationMethods;
   history: HistoryMethods;
   keyboard: KeyboardMethods;
-  lazy: LazyMethods;
   mousewheel: MousewheelMethods;
   navigation: NavigationMethods;
   pagination: PaginationMethods;

src/types/swiper-events.d.ts

@@ -13,7 +13,6 @@ import { CardsEffectEvents } from './modules/effect-cards';
 import { HashNavigationEvents } from './modules/hash-navigation';
 import { HistoryEvents } from './modules/history';
 import { KeyboardEvents } from './modules/keyboard';
-import { LazyEvents } from './modules/lazy';
 import { MousewheelEvents } from './modules/mousewheel';
 import { NavigationEvents } from './modules/navigation';
 import { PaginationEvents } from './modules/pagination';
@@ -345,7 +344,6 @@ interface SwiperEvents extends CardsEffectEvents {}
 interface SwiperEvents extends HashNavigationEvents {}
 interface SwiperEvents extends HistoryEvents {}
 interface SwiperEvents extends KeyboardEvents {}
-interface SwiperEvents extends LazyEvents {}
 interface SwiperEvents extends MousewheelEvents {}
 interface SwiperEvents extends NavigationEvents {}
 interface SwiperEvents extends PaginationEvents {}