Swiper观察者随机延迟
我建立与使用滑块功能缩略图画廊组队,探索(v6.5.1)。默认情况下,滑块是隐藏的,当用户单击其中一张图像时,滑块必须显示为显示单击的图像。滑块打开后,用户可以单击关闭按钮将其隐藏并返回缩略图库。
这是我正在使用的代码:
JS:
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
document.querySelectorAll( '.gallery-thumbnails a[data-slide]' ).forEach( item => {
item.addEventListener( 'click', function( e ) {
e.preventDefault();
window.scrollTo( 0, 0 );
document.querySelector( '.gallery-thumbnails' ).style.display = 'none';
document.querySelector( '.gallery-slider .swiper-container' ).style.display = 'block';
var slideno = $( this ).data( 'slide' );
swiper.slideTo( slideno + 1, false, false );
});
});
document.querySelector( '.gallery-slider .close' ).addEventListener( 'click', function( e ) {
e.preventDefault();
document.querySelector( '.gallery-slider .swiper-container' ).style.display = 'none';
document.querySelector( '.gallery-thumbnails' ).style.display = 'flex';
});
CSS:
.gallery-slider .swiper-container {
display: none;
}
HTML:
<div>
<div><a href=""><img src="thumb0.jpg" /></a></div>
<div><a href=""><img src="thumb1.jpg" /></a></div>
<div><a href=""><img src="thumb2.jpg" /></a></div>
<div><a href=""><img src="thumb3.jpg" /></a></div>
....
</div>
<div>
<div>
<div>previous</div>
<div>next</div>
<div>close</div>
<div>
<div><img src="slide0.jpg" /></div>
<div><img src="slide1.jpg" /></div>
<div><img src="slide2.jpg" /></div>
<div><img src="slide3.jpg" /></div>
....
</div>
</div>
</div>
如您所见,代码使用了 Swiper 的观察者功能,每次 Swiper 的样式(如隐藏/显示)或其子元素(如添加/删除幻灯片)发生变化时,都会重新初始化 Swiper。
我第一次单击缩略图库中的图像时,一切都按预期工作。但是,如果我使用“关闭”按钮隐藏滑块,然后单击新图像以再次打开滑块,滑块会出现但直到几秒钟后才响应。奇怪的是,这种延迟并不总是一样的。有时几乎是瞬间的,有时当滑块开始响应下一个和上一个按钮中的点击时已经过去了 x 秒以上。我注意到的一件事是,如果我调整窗口大小,滑块会立即响应。
我在最新的 Chrome 和 Firefox 中尝试了此代码,结果相同。
这是预期的行为吗?是MutationObserver使用由观察者特征不一定是侦听到DOM的变化?我是否以错误的方式初始化 Swiper?
这是 Swiper 观察者的代码:
https://github.com/nolimits4web/swiper/blob/master/src/modules/observer/observer.js