Skip to content

Commit

Permalink
feat(core): lazyPreloadPrevNext option to preload prev/next images (#…
Browse files Browse the repository at this point in the history
…6544)

* feat: lazyPreloadPrevNext option to preload prev/next images
* preload lint fixes
  • Loading branch information
Carnoisseur1979 authored Mar 31, 2023
1 parent 6016a50 commit 1cb3233
Show file tree
Hide file tree
Showing 8 changed files with 45 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/components-shared/params-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const paramsList = [
'slidePrevClass',
'wrapperClass',
'lazyPreloaderClass',
'lazyPreloadPrevNext',
'runCallbacksOnInit',
'observer',
'observeParents',
Expand Down
3 changes: 2 additions & 1 deletion src/core/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -581,6 +581,7 @@ class Swiper {
});
}
});
preload(swiper);

// Init Flag
swiper.initialized = true;
Expand Down
1 change: 1 addition & 0 deletions src/core/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export default {
slidePrevClass: 'swiper-slide-prev',
wrapperClass: 'swiper-wrapper',
lazyPreloaderClass: 'swiper-lazy-preloader',
lazyPreloadPrevNext: 0,

// Callbacks
runCallbacksOnInit: true,
Expand Down
5 changes: 5 additions & 0 deletions src/core/update/updateActiveIndex.js
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -84,6 +86,9 @@ export default function updateActiveIndex(newActiveIndex) {
previousIndex,
activeIndex,
});

preload(swiper);

swiper.emit('activeIndexChange');
swiper.emit('snapIndexChange');
if (previousRealIndex !== realIndex) {
Expand Down
24 changes: 24 additions & 0 deletions src/shared/process-lazy-preloader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
};
7 changes: 7 additions & 0 deletions src/types/swiper-options.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
4 changes: 4 additions & 0 deletions src/vue/swiper-vue.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,10 @@ declare const Swiper: DefineComponent<
type: StringConstructor;
default: undefined;
};
lazyPreloadPrevNext: {
type: NumberConstructor;
default: undefined;
};
runCallbacksOnInit: {
type: BooleanConstructor;
default: undefined;
Expand Down
1 change: 1 addition & 0 deletions src/vue/swiper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down

0 comments on commit 1cb3233

Please sign in to comment.