1 | 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); }
|
2 |
|
3 | import $ from '../../utils/dom';
|
4 | import { bindModuleMethods } from '../../utils/utils';
|
5 | var Lazy = {
|
6 | loadInSlide: function loadInSlide(index, loadInDuplicate) {
|
7 | if (loadInDuplicate === void 0) {
|
8 | loadInDuplicate = true;
|
9 | }
|
10 |
|
11 | var swiper = this;
|
12 | var params = swiper.params.lazy;
|
13 | if (typeof index === 'undefined') return;
|
14 | if (swiper.slides.length === 0) return;
|
15 | var isVirtual = swiper.virtual && swiper.params.virtual.enabled;
|
16 | var $slideEl = isVirtual ? swiper.$wrapperEl.children("." + swiper.params.slideClass + "[data-swiper-slide-index=\"" + index + "\"]") : swiper.slides.eq(index);
|
17 | var $images = $slideEl.find("." + params.elementClass + ":not(." + params.loadedClass + "):not(." + params.loadingClass + ")");
|
18 |
|
19 | if ($slideEl.hasClass(params.elementClass) && !$slideEl.hasClass(params.loadedClass) && !$slideEl.hasClass(params.loadingClass)) {
|
20 | $images.push($slideEl[0]);
|
21 | }
|
22 |
|
23 | if ($images.length === 0) return;
|
24 | $images.each(function (imageEl) {
|
25 | var $imageEl = $(imageEl);
|
26 | $imageEl.addClass(params.loadingClass);
|
27 | var background = $imageEl.attr('data-background');
|
28 | var src = $imageEl.attr('data-src');
|
29 | var srcset = $imageEl.attr('data-srcset');
|
30 | var sizes = $imageEl.attr('data-sizes');
|
31 | var $pictureEl = $imageEl.parent('picture');
|
32 | swiper.loadImage($imageEl[0], src || background, srcset, sizes, false, function () {
|
33 | if (typeof swiper === 'undefined' || swiper === null || !swiper || swiper && !swiper.params || swiper.destroyed) return;
|
34 |
|
35 | if (background) {
|
36 | $imageEl.css('background-image', "url(\"" + background + "\")");
|
37 | $imageEl.removeAttr('data-background');
|
38 | } else {
|
39 | if (srcset) {
|
40 | $imageEl.attr('srcset', srcset);
|
41 | $imageEl.removeAttr('data-srcset');
|
42 | }
|
43 |
|
44 | if (sizes) {
|
45 | $imageEl.attr('sizes', sizes);
|
46 | $imageEl.removeAttr('data-sizes');
|
47 | }
|
48 |
|
49 | if ($pictureEl.length) {
|
50 | $pictureEl.children('source').each(function (sourceEl) {
|
51 | var $source = $(sourceEl);
|
52 |
|
53 | if ($source.attr('data-srcset')) {
|
54 | $source.attr('srcset', $source.attr('data-srcset'));
|
55 | $source.removeAttr('data-srcset');
|
56 | }
|
57 | });
|
58 | }
|
59 |
|
60 | if (src) {
|
61 | $imageEl.attr('src', src);
|
62 | $imageEl.removeAttr('data-src');
|
63 | }
|
64 | }
|
65 |
|
66 | $imageEl.addClass(params.loadedClass).removeClass(params.loadingClass);
|
67 | $slideEl.find("." + params.preloaderClass).remove();
|
68 |
|
69 | if (swiper.params.loop && loadInDuplicate) {
|
70 | var slideOriginalIndex = $slideEl.attr('data-swiper-slide-index');
|
71 |
|
72 | if ($slideEl.hasClass(swiper.params.slideDuplicateClass)) {
|
73 | var originalSlide = swiper.$wrapperEl.children("[data-swiper-slide-index=\"" + slideOriginalIndex + "\"]:not(." + swiper.params.slideDuplicateClass + ")");
|
74 | swiper.lazy.loadInSlide(originalSlide.index(), false);
|
75 | } else {
|
76 | var duplicatedSlide = swiper.$wrapperEl.children("." + swiper.params.slideDuplicateClass + "[data-swiper-slide-index=\"" + slideOriginalIndex + "\"]");
|
77 | swiper.lazy.loadInSlide(duplicatedSlide.index(), false);
|
78 | }
|
79 | }
|
80 |
|
81 | swiper.emit('lazyImageReady', $slideEl[0], $imageEl[0]);
|
82 |
|
83 | if (swiper.params.autoHeight) {
|
84 | swiper.updateAutoHeight();
|
85 | }
|
86 | });
|
87 | swiper.emit('lazyImageLoad', $slideEl[0], $imageEl[0]);
|
88 | });
|
89 | },
|
90 | load: function load() {
|
91 | var swiper = this;
|
92 | var $wrapperEl = swiper.$wrapperEl,
|
93 | swiperParams = swiper.params,
|
94 | slides = swiper.slides,
|
95 | activeIndex = swiper.activeIndex;
|
96 | var isVirtual = swiper.virtual && swiperParams.virtual.enabled;
|
97 | var params = swiperParams.lazy;
|
98 | var slidesPerView = swiperParams.slidesPerView;
|
99 |
|
100 | if (slidesPerView === 'auto') {
|
101 | slidesPerView = 0;
|
102 | }
|
103 |
|
104 | function slideExist(index) {
|
105 | if (isVirtual) {
|
106 | if ($wrapperEl.children("." + swiperParams.slideClass + "[data-swiper-slide-index=\"" + index + "\"]").length) {
|
107 | return true;
|
108 | }
|
109 | } else if (slides[index]) return true;
|
110 |
|
111 | return false;
|
112 | }
|
113 |
|
114 | function slideIndex(slideEl) {
|
115 | if (isVirtual) {
|
116 | return $(slideEl).attr('data-swiper-slide-index');
|
117 | }
|
118 |
|
119 | return $(slideEl).index();
|
120 | }
|
121 |
|
122 | if (!swiper.lazy.initialImageLoaded) swiper.lazy.initialImageLoaded = true;
|
123 |
|
124 | if (swiper.params.watchSlidesVisibility) {
|
125 | $wrapperEl.children("." + swiperParams.slideVisibleClass).each(function (slideEl) {
|
126 | var index = isVirtual ? $(slideEl).attr('data-swiper-slide-index') : $(slideEl).index();
|
127 | swiper.lazy.loadInSlide(index);
|
128 | });
|
129 | } else if (slidesPerView > 1) {
|
130 | for (var i = activeIndex; i < activeIndex + slidesPerView; i += 1) {
|
131 | if (slideExist(i)) swiper.lazy.loadInSlide(i);
|
132 | }
|
133 | } else {
|
134 | swiper.lazy.loadInSlide(activeIndex);
|
135 | }
|
136 |
|
137 | if (params.loadPrevNext) {
|
138 | if (slidesPerView > 1 || params.loadPrevNextAmount && params.loadPrevNextAmount > 1) {
|
139 | var amount = params.loadPrevNextAmount;
|
140 | var spv = slidesPerView;
|
141 | var maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length);
|
142 | var minIndex = Math.max(activeIndex - Math.max(spv, amount), 0);
|
143 |
|
144 | for (var _i = activeIndex + slidesPerView; _i < maxIndex; _i += 1) {
|
145 | if (slideExist(_i)) swiper.lazy.loadInSlide(_i);
|
146 | }
|
147 |
|
148 |
|
149 | for (var _i2 = minIndex; _i2 < activeIndex; _i2 += 1) {
|
150 | if (slideExist(_i2)) swiper.lazy.loadInSlide(_i2);
|
151 | }
|
152 | } else {
|
153 | var nextSlide = $wrapperEl.children("." + swiperParams.slideNextClass);
|
154 | if (nextSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(nextSlide));
|
155 | var prevSlide = $wrapperEl.children("." + swiperParams.slidePrevClass);
|
156 | if (prevSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(prevSlide));
|
157 | }
|
158 | }
|
159 | }
|
160 | };
|
161 | export default {
|
162 | name: 'lazy',
|
163 | params: {
|
164 | lazy: {
|
165 | enabled: false,
|
166 | loadPrevNext: false,
|
167 | loadPrevNextAmount: 1,
|
168 | loadOnTransitionStart: false,
|
169 | elementClass: 'swiper-lazy',
|
170 | loadingClass: 'swiper-lazy-loading',
|
171 | loadedClass: 'swiper-lazy-loaded',
|
172 | preloaderClass: 'swiper-lazy-preloader'
|
173 | }
|
174 | },
|
175 | create: function create() {
|
176 | var swiper = this;
|
177 | bindModuleMethods(swiper, {
|
178 | lazy: _extends({
|
179 | initialImageLoaded: false
|
180 | }, Lazy)
|
181 | });
|
182 | },
|
183 | on: {
|
184 | beforeInit: function beforeInit(swiper) {
|
185 | if (swiper.params.lazy.enabled && swiper.params.preloadImages) {
|
186 | swiper.params.preloadImages = false;
|
187 | }
|
188 | },
|
189 | init: function init(swiper) {
|
190 | if (swiper.params.lazy.enabled && !swiper.params.loop && swiper.params.initialSlide === 0) {
|
191 | swiper.lazy.load();
|
192 | }
|
193 | },
|
194 | scroll: function scroll(swiper) {
|
195 | if (swiper.params.freeMode && !swiper.params.freeModeSticky) {
|
196 | swiper.lazy.load();
|
197 | }
|
198 | },
|
199 | resize: function resize(swiper) {
|
200 | if (swiper.params.lazy.enabled) {
|
201 | swiper.lazy.load();
|
202 | }
|
203 | },
|
204 | scrollbarDragMove: function scrollbarDragMove(swiper) {
|
205 | if (swiper.params.lazy.enabled) {
|
206 | swiper.lazy.load();
|
207 | }
|
208 | },
|
209 | transitionStart: function transitionStart(swiper) {
|
210 | if (swiper.params.lazy.enabled) {
|
211 | if (swiper.params.lazy.loadOnTransitionStart || !swiper.params.lazy.loadOnTransitionStart && !swiper.lazy.initialImageLoaded) {
|
212 | swiper.lazy.load();
|
213 | }
|
214 | }
|
215 | },
|
216 | transitionEnd: function transitionEnd(swiper) {
|
217 | if (swiper.params.lazy.enabled && !swiper.params.lazy.loadOnTransitionStart) {
|
218 | swiper.lazy.load();
|
219 | }
|
220 | },
|
221 | slideChange: function slideChange(swiper) {
|
222 | if (swiper.params.lazy.enabled && swiper.params.cssMode) {
|
223 | swiper.lazy.load();
|
224 | }
|
225 | }
|
226 | }
|
227 | }; |
\ | No newline at end of file |