285 lines
11 KiB
JavaScript
285 lines
11 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _ssrWindow = require("ssr-window");
|
|
|
|
var _dom = _interopRequireDefault(require("../../utils/dom"));
|
|
|
|
var _utils = require("../../utils/utils");
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
|
|
var Lazy = {
|
|
loadInSlide: function loadInSlide(index, loadInDuplicate) {
|
|
if (loadInDuplicate === void 0) {
|
|
loadInDuplicate = true;
|
|
}
|
|
|
|
var swiper = this;
|
|
var params = swiper.params.lazy;
|
|
if (typeof index === 'undefined') return;
|
|
if (swiper.slides.length === 0) return;
|
|
var isVirtual = swiper.virtual && swiper.params.virtual.enabled;
|
|
var $slideEl = isVirtual ? swiper.$wrapperEl.children("." + swiper.params.slideClass + "[data-swiper-slide-index=\"" + index + "\"]") : swiper.slides.eq(index);
|
|
var $images = $slideEl.find("." + params.elementClass + ":not(." + params.loadedClass + "):not(." + params.loadingClass + ")");
|
|
|
|
if ($slideEl.hasClass(params.elementClass) && !$slideEl.hasClass(params.loadedClass) && !$slideEl.hasClass(params.loadingClass)) {
|
|
$images.push($slideEl[0]);
|
|
}
|
|
|
|
if ($images.length === 0) return;
|
|
$images.each(function (imageEl) {
|
|
var $imageEl = (0, _dom.default)(imageEl);
|
|
$imageEl.addClass(params.loadingClass);
|
|
var background = $imageEl.attr('data-background');
|
|
var src = $imageEl.attr('data-src');
|
|
var srcset = $imageEl.attr('data-srcset');
|
|
var sizes = $imageEl.attr('data-sizes');
|
|
var $pictureEl = $imageEl.parent('picture');
|
|
swiper.loadImage($imageEl[0], src || background, srcset, sizes, false, function () {
|
|
if (typeof swiper === 'undefined' || swiper === null || !swiper || swiper && !swiper.params || swiper.destroyed) return;
|
|
|
|
if (background) {
|
|
$imageEl.css('background-image', "url(\"" + background + "\")");
|
|
$imageEl.removeAttr('data-background');
|
|
} else {
|
|
if (srcset) {
|
|
$imageEl.attr('srcset', srcset);
|
|
$imageEl.removeAttr('data-srcset');
|
|
}
|
|
|
|
if (sizes) {
|
|
$imageEl.attr('sizes', sizes);
|
|
$imageEl.removeAttr('data-sizes');
|
|
}
|
|
|
|
if ($pictureEl.length) {
|
|
$pictureEl.children('source').each(function (sourceEl) {
|
|
var $source = (0, _dom.default)(sourceEl);
|
|
|
|
if ($source.attr('data-srcset')) {
|
|
$source.attr('srcset', $source.attr('data-srcset'));
|
|
$source.removeAttr('data-srcset');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (src) {
|
|
$imageEl.attr('src', src);
|
|
$imageEl.removeAttr('data-src');
|
|
}
|
|
}
|
|
|
|
$imageEl.addClass(params.loadedClass).removeClass(params.loadingClass);
|
|
$slideEl.find("." + params.preloaderClass).remove();
|
|
|
|
if (swiper.params.loop && loadInDuplicate) {
|
|
var slideOriginalIndex = $slideEl.attr('data-swiper-slide-index');
|
|
|
|
if ($slideEl.hasClass(swiper.params.slideDuplicateClass)) {
|
|
var originalSlide = swiper.$wrapperEl.children("[data-swiper-slide-index=\"" + slideOriginalIndex + "\"]:not(." + swiper.params.slideDuplicateClass + ")");
|
|
swiper.lazy.loadInSlide(originalSlide.index(), false);
|
|
} else {
|
|
var duplicatedSlide = swiper.$wrapperEl.children("." + swiper.params.slideDuplicateClass + "[data-swiper-slide-index=\"" + slideOriginalIndex + "\"]");
|
|
swiper.lazy.loadInSlide(duplicatedSlide.index(), false);
|
|
}
|
|
}
|
|
|
|
swiper.emit('lazyImageReady', $slideEl[0], $imageEl[0]);
|
|
|
|
if (swiper.params.autoHeight) {
|
|
swiper.updateAutoHeight();
|
|
}
|
|
});
|
|
swiper.emit('lazyImageLoad', $slideEl[0], $imageEl[0]);
|
|
});
|
|
},
|
|
load: function load() {
|
|
var swiper = this;
|
|
var $wrapperEl = swiper.$wrapperEl,
|
|
swiperParams = swiper.params,
|
|
slides = swiper.slides,
|
|
activeIndex = swiper.activeIndex;
|
|
var isVirtual = swiper.virtual && swiperParams.virtual.enabled;
|
|
var params = swiperParams.lazy;
|
|
var slidesPerView = swiperParams.slidesPerView;
|
|
|
|
if (slidesPerView === 'auto') {
|
|
slidesPerView = 0;
|
|
}
|
|
|
|
function slideExist(index) {
|
|
if (isVirtual) {
|
|
if ($wrapperEl.children("." + swiperParams.slideClass + "[data-swiper-slide-index=\"" + index + "\"]").length) {
|
|
return true;
|
|
}
|
|
} else if (slides[index]) return true;
|
|
|
|
return false;
|
|
}
|
|
|
|
function slideIndex(slideEl) {
|
|
if (isVirtual) {
|
|
return (0, _dom.default)(slideEl).attr('data-swiper-slide-index');
|
|
}
|
|
|
|
return (0, _dom.default)(slideEl).index();
|
|
}
|
|
|
|
if (!swiper.lazy.initialImageLoaded) swiper.lazy.initialImageLoaded = true;
|
|
|
|
if (swiper.params.watchSlidesVisibility) {
|
|
$wrapperEl.children("." + swiperParams.slideVisibleClass).each(function (slideEl) {
|
|
var index = isVirtual ? (0, _dom.default)(slideEl).attr('data-swiper-slide-index') : (0, _dom.default)(slideEl).index();
|
|
swiper.lazy.loadInSlide(index);
|
|
});
|
|
} else if (slidesPerView > 1) {
|
|
for (var i = activeIndex; i < activeIndex + slidesPerView; i += 1) {
|
|
if (slideExist(i)) swiper.lazy.loadInSlide(i);
|
|
}
|
|
} else {
|
|
swiper.lazy.loadInSlide(activeIndex);
|
|
}
|
|
|
|
if (params.loadPrevNext) {
|
|
if (slidesPerView > 1 || params.loadPrevNextAmount && params.loadPrevNextAmount > 1) {
|
|
var amount = params.loadPrevNextAmount;
|
|
var spv = slidesPerView;
|
|
var maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length);
|
|
var minIndex = Math.max(activeIndex - Math.max(spv, amount), 0); // Next Slides
|
|
|
|
for (var _i = activeIndex + slidesPerView; _i < maxIndex; _i += 1) {
|
|
if (slideExist(_i)) swiper.lazy.loadInSlide(_i);
|
|
} // Prev Slides
|
|
|
|
|
|
for (var _i2 = minIndex; _i2 < activeIndex; _i2 += 1) {
|
|
if (slideExist(_i2)) swiper.lazy.loadInSlide(_i2);
|
|
}
|
|
} else {
|
|
var nextSlide = $wrapperEl.children("." + swiperParams.slideNextClass);
|
|
if (nextSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(nextSlide));
|
|
var prevSlide = $wrapperEl.children("." + swiperParams.slidePrevClass);
|
|
if (prevSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(prevSlide));
|
|
}
|
|
}
|
|
},
|
|
checkInViewOnLoad: function checkInViewOnLoad() {
|
|
var window = (0, _ssrWindow.getWindow)();
|
|
var swiper = this;
|
|
if (!swiper || swiper.destroyed) return;
|
|
var $scrollElement = swiper.params.lazy.scrollingElement ? (0, _dom.default)(swiper.params.lazy.scrollingElement) : (0, _dom.default)(window);
|
|
var isWindow = $scrollElement[0] === window;
|
|
var scrollElementWidth = isWindow ? window.innerWidth : $scrollElement[0].offsetWidth;
|
|
var scrollElementHeight = isWindow ? window.innerHeight : $scrollElement[0].offsetHeight;
|
|
var swiperOffset = swiper.$el.offset();
|
|
var rtl = swiper.rtlTranslate;
|
|
var inView = false;
|
|
if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft;
|
|
var swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiper.width, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiper.height], [swiperOffset.left + swiper.width, swiperOffset.top + swiper.height]];
|
|
|
|
for (var i = 0; i < swiperCoord.length; i += 1) {
|
|
var point = swiperCoord[i];
|
|
|
|
if (point[0] >= 0 && point[0] <= scrollElementWidth && point[1] >= 0 && point[1] <= scrollElementHeight) {
|
|
if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
|
|
|
|
inView = true;
|
|
}
|
|
}
|
|
|
|
var passiveListener = swiper.touchEvents.start === 'touchstart' && swiper.support.passiveListener && swiper.params.passiveListeners ? {
|
|
passive: true,
|
|
capture: false
|
|
} : false;
|
|
|
|
if (inView) {
|
|
swiper.lazy.load();
|
|
$scrollElement.off('scroll', swiper.lazy.checkInViewOnLoad, passiveListener);
|
|
} else if (!swiper.lazy.scrollHandlerAttached) {
|
|
swiper.lazy.scrollHandlerAttached = true;
|
|
$scrollElement.on('scroll', swiper.lazy.checkInViewOnLoad, passiveListener);
|
|
}
|
|
}
|
|
};
|
|
var _default = {
|
|
name: 'lazy',
|
|
params: {
|
|
lazy: {
|
|
checkInView: false,
|
|
enabled: false,
|
|
loadPrevNext: false,
|
|
loadPrevNextAmount: 1,
|
|
loadOnTransitionStart: false,
|
|
scrollingElement: '',
|
|
elementClass: 'swiper-lazy',
|
|
loadingClass: 'swiper-lazy-loading',
|
|
loadedClass: 'swiper-lazy-loaded',
|
|
preloaderClass: 'swiper-lazy-preloader'
|
|
}
|
|
},
|
|
create: function create() {
|
|
var swiper = this;
|
|
(0, _utils.bindModuleMethods)(swiper, {
|
|
lazy: _extends({
|
|
initialImageLoaded: false
|
|
}, Lazy)
|
|
});
|
|
},
|
|
on: {
|
|
beforeInit: function beforeInit(swiper) {
|
|
if (swiper.params.lazy.enabled && swiper.params.preloadImages) {
|
|
swiper.params.preloadImages = false;
|
|
}
|
|
},
|
|
init: function init(swiper) {
|
|
if (swiper.params.lazy.enabled && !swiper.params.loop && swiper.params.initialSlide === 0) {
|
|
if (swiper.params.lazy.checkInView) {
|
|
swiper.lazy.checkInViewOnLoad();
|
|
} else {
|
|
swiper.lazy.load();
|
|
}
|
|
}
|
|
},
|
|
scroll: function scroll(swiper) {
|
|
if (swiper.params.freeMode && !swiper.params.freeModeSticky) {
|
|
swiper.lazy.load();
|
|
}
|
|
},
|
|
'scrollbarDragMove resize _freeModeNoMomentumRelease': function lazyLoad(swiper) {
|
|
if (swiper.params.lazy.enabled) {
|
|
swiper.lazy.load();
|
|
}
|
|
},
|
|
transitionStart: function transitionStart(swiper) {
|
|
if (swiper.params.lazy.enabled) {
|
|
if (swiper.params.lazy.loadOnTransitionStart || !swiper.params.lazy.loadOnTransitionStart && !swiper.lazy.initialImageLoaded) {
|
|
swiper.lazy.load();
|
|
}
|
|
}
|
|
},
|
|
transitionEnd: function transitionEnd(swiper) {
|
|
if (swiper.params.lazy.enabled && !swiper.params.lazy.loadOnTransitionStart) {
|
|
swiper.lazy.load();
|
|
}
|
|
},
|
|
slideChange: function slideChange(swiper) {
|
|
var _swiper$params = swiper.params,
|
|
lazy = _swiper$params.lazy,
|
|
cssMode = _swiper$params.cssMode,
|
|
watchSlidesVisibility = _swiper$params.watchSlidesVisibility,
|
|
watchSlidesProgress = _swiper$params.watchSlidesProgress,
|
|
touchReleaseOnEdges = _swiper$params.touchReleaseOnEdges,
|
|
resistanceRatio = _swiper$params.resistanceRatio;
|
|
|
|
if (lazy.enabled && (cssMode || (watchSlidesVisibility || watchSlidesProgress) && (touchReleaseOnEdges || resistanceRatio === 0))) {
|
|
swiper.lazy.load();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
exports.default = _default; |