如何在加载时修复光滑的滑块跳跃图像答案

【问题标题】：How to fix slick slider jumping image on load如何在加载时修复光滑的滑块跳跃图像
【发布时间】：2017-10-11 17:41:23
【问题描述】：

我有一个将adaptiveHeight 属性设置为false 的光滑滑块。所以，如果我在光滑的容器中第一张幻灯片中有小图像 - 它将垂直居中，左侧区域将填充背景颜色（如this image）。

如何在加载 slick 之前计算 slick 滑块区域高度以防止加载时“跳跃”？有谁知道，slick 如何计算 slick 容器中的图像高度和宽度？有任何想法吗？

【问题讨论】：

【解决方案1】：

您可以使用ImagesLoaded 之类的插件包装 slick，以确保您的图像在初始化 Slick 之前具有高度。如果您不希望这将创建的无样式图像的闪光，您需要应用一些样式来最初隐藏它们（例如将它们绝对放置在屏幕左侧），然后在加载图像时删除这些样式，类似：

$('#slider').imagesLoaded( function() {
  // remove your hiding class
  // initialise slick
});

【讨论】：

谢谢，我明天试试，写个结果。还有什么想法吗？因为我的老板不喜欢使用很多插件）
您可以通过检查图像的 onload 状态来滚动您自己的版本，但是您必须处理所有边缘情况（例如某些浏览器在图像缓存时不触发 onload）。我通常不推荐插件方法，但 imagesLoaded 是我发现自己经常返回的少数几个之一（缩小版也只有 5k）。