Slick轮播搭配lazyLoad与adaptiveHeight时图片被裁剪，如何动态设置当前slide高度

问题本质 #

Slick开启lazyLoad:'ondemand'时，图片资源是按需加载的，初始化阶段无法拿到未加载图片的高度，即使开启adaptiveHeight:true也无法提前计算对应slide的高度，最终导致图片加载后被裁剪。

原代码不生效原因 #

1. lazyLoaded事件触发时仅代表图片资源加载完成，此时浏览器还未完成图片的DOM渲染布局，直接调用image.height()会返回0
2. 直接选中.slick-current设置高度存在逻辑漏洞：如果Slick预加载了非激活态的slide图片，会错误修改当前展示项的高度

可直接运行的解决方案 #

方案1：触发Slick原生高度重算（最省心，无需手动计算高度） #

调用Slick内置的slickSetOption方法重新赋值adaptiveHeight，触发组件内部自动重新计算所有slide的高度：

$('.slider').on('lazyLoaded', function (e, slick, image, imageSource) {
    $(this).slick('slickSetOption', 'adaptiveHeight', true, true);
});

方案2：手动计算图片真实高度设置（可控性更高，适配自定义样式场景） #

通过图片DOM对象的naturalHeight属性直接获取资源本身的原始高度，不受渲染状态影响，再找到图片所属的slide节点设置高度：

$('.slider').on('lazyLoaded', function (e, slick, image, imageSource) {
    const imgDom = image[0];
    // 若图片做了响应式max-width:100%处理，需计算等比缩放后的实际渲染高度
    const showHeight = imgDom.naturalHeight * (image.width() / imgDom.naturalWidth);
    // 找到当前图片所属的slide节点设置高度，避免误改其他项
    image.closest('.slick-slide').height(showHeight);
    // 可选：触发Slick原生高度重算，适配多图等复杂场景
    $(this).slick('slickSetOption', 'adaptiveHeight', true, true);
});

注意事项 #

如果slide节点或img标签设置了padding、border、margin值，计算高度时需要将对应尺寸累加，避免高度计算偏差。

内容的提问来源于stack exchange，提问作者compliance