first commit
This commit is contained in:
@@ -0,0 +1,274 @@
|
||||
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); }
|
||||
|
||||
import { getWindow } from 'ssr-window';
|
||||
import $ from '../../utils/dom';
|
||||
import { bindModuleMethods } from '../../utils/utils';
|
||||
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 = $(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 = $(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 $(slideEl).attr('data-swiper-slide-index');
|
||||
}
|
||||
|
||||
return $(slideEl).index();
|
||||
}
|
||||
|
||||
if (!swiper.lazy.initialImageLoaded) swiper.lazy.initialImageLoaded = true;
|
||||
|
||||
if (swiper.params.watchSlidesVisibility) {
|
||||
$wrapperEl.children("." + swiperParams.slideVisibleClass).each(function (slideEl) {
|
||||
var index = isVirtual ? $(slideEl).attr('data-swiper-slide-index') : $(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 = getWindow();
|
||||
var swiper = this;
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
var $scrollElement = swiper.params.lazy.scrollingElement ? $(swiper.params.lazy.scrollingElement) : $(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);
|
||||
}
|
||||
}
|
||||
};
|
||||
export 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;
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user