swiper初始化时显示加载动画？

Question

我有一个关于Swiper的问题以及如何在响应环境中显示加载动画。

它的Swiper版本：3.4.2。

我做了什么

嗨，我已将.swiper-container设置为

{ width: 100%; height: auto; } 

因为该网站具有响应能力。 其他我使用标准swiper.min.css和swiper.min.js进行这些设置：

autoheight: true,
grabCursor: true,
slidesPerView: 1,
autoHeight: true,
keyboardControl: true,
paginationType: 'fraction',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

预期行为

我希望将容器设置为第一个图像的高度，并在容器中间显示加载动画，直到加载图像。

实际行为

狙击容器只是箭头的高度。接下来你看到的是裁剪的第一个图像（容器的大小，它是箭头的大小），只有在那之后，容器才被设置为第一个图像的大小。

我真的很感激一些帮助。

感谢
斯蒂芬

Answer 1

您是否尝试过Lazy Loading？

幻灯片放映（/浏览器）将无法确定幻灯片的高度，直到图片加载完毕，因此您可能需要手动确定第一张幻灯片上的图像高度并使用该初始化容器。

请参阅Images Lazy Loading demo。