页面首次加载时bxslider图像太大

Question

我正在使用bxslider，当滑块加载图像时，内部同时加载全尺寸，这使得网站看起来很奇怪。滑块内有大约5个图像，当页面加载/刷新时，它们在调整大小之前都以全尺寸显示。

如果控制尺寸宽度和宽度，则宽度设置为100％。以下代码中的高度在移动/平板电脑设备中看起来不正确，因此尺寸需要适应所有屏幕。

这是目前使用的代码：

.bx-wrapper {
    position: relative;
    margin: 0 auto 60px;
    padding: 0;
    *zoom: 1;
}
.bx-wrapper img {
    max-width: 100%;
       /* display: block; */
}

我希望有人可以帮助并在页面加载时停止过度缩放图像，并牢记所有屏幕尺寸。

由于

Answer 1

在处理滑块之前，您可以使用bxSlider's preloadImages option加载所有滑块的图像：

$('.bxslider').bxSlider({
  preloadImages: 'all'
});

（将.bxslider更改为滑块实例的相应类...）