Slick轮播设置data-lazy懒加载时图片无法显示如何解决

核心错误点排查 #

• 缺失img初始src属性
  Slick懒加载逻辑不会对无src属性的img执行地址替换，会一直停留在slick-loading状态。哪怕不配置真实图片地址，也必须给img加一个合法的初始src，最通用的方案是用1px透明base64占位图。
  错误写法：

  <div class="slick-slide">
    <img data-lazy="/img/real-banner1.jpg" alt="banner">
  </div>
  

  正确写法：

  <div class="slick-slide">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-lazy="/img/real-banner1.jpg" alt="banner">
  </div>
  

• 自定义beforeChange事件和原生逻辑冲突
  不需要手动绑定beforeChange处理source标签的srcset，Slick原生支持picture标签下的source懒加载，手动写逻辑操作DOM会打断插件自身的加载状态切换流程，导致slick-loading类无法正常移除、图片地址不替换。
  如果要使用响应式picture结构，直接给source标签也加data-lazy属性存对应srcset地址即可，插件会自动处理：

  <div class="slick-slide">
    <picture>
      <source media="(min-width: 768px)" data-lazy="/img/pc-banner1.jpg">
      <source media="(max-width: 767px)" data-lazy="/img/mobile-banner1.jpg">
      <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-lazy="/img/default-banner1.jpg" alt="banner">
    </picture>
  </div>
  

  如果必须保留自定义beforeChange逻辑，不要手动移除slick-loading类、不要阻止事件冒泡，避免打断插件原生执行流程。
• lazyLoad参数拼写错误
  Slick的lazyLoad仅支持两个合法枚举值：ondemand（滑动到对应屏再加载）、progressive（页面加载完成后后台逐张加载），大小写错误、拼写错误都会导致懒加载逻辑完全不触发。
  最小可用初始化代码参考：

  $('.slick-container').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 1,
    slidesToScroll: 1,
    // 先移除自定义beforeChange逻辑，确认基础懒加载正常后再追加自定义代码
  })
  

排查顺序建议 #

先给所有轮播img加上透明占位src，移除自定义beforeChange事件，用单img+data-lazy的最简结构测试，确认基础懒加载功能正常后，再逐步追加picture结构、自定义事件逻辑，定位具体冲突点。

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