slick.js如何实现幻灯片进入视口时延迟加载指定图片

1. 改造HTML结构 #

首先将需要延迟加载的图片的src属性替换为data-src存储真实图片地址，避免页面初始化时直接发起资源请求，同时给图片添加自定义类方便后续控制动画：

<div class="container">
  <div class="slider slider-for">
    <div class="third-slide">
      <img src="media/bg3.png" />

      <div class="third-slide-menu">
        <a href="#" data-slide="3" class="subnav-current">Page1</a>
        <a href="#" data-slide="4">Page2</a>
        <a href="#" data-slide="8">Page3</a>
        <a href="#" data-slide="12">Page4</a>
        <a href="#" data-slide="15">Page5</a>
        <a href="#" data-slide="2">Page6</a>
      </div>

      <div class="third-slide-first">
        <!-- 替换src为data-src，添加动画控制类 -->
        <img data-src="media/second-slide-left.png" class="lazy-delay-img" />
      </div>
    </div>
  </div>
</div>

2. 调整JS逻辑 #

基于原有slick初始化代码，添加幻灯片切换监听、延迟控制、加载防重逻辑：

// 存储定时器ID，用于切换幻灯片时清除未执行的延迟任务
let slideImgLoadTimer = null;

$('.slider-for').slick({
  vertical: true,
  slidesToShow: 1,
  arrows: false,
  speed: 0,
  swipe: false
})
// 监听slick切换完成事件，比手动检测DOM类名更稳定
.on('afterChange', function(event, slickInstance, currentIndex) {
  // 每次切换先清除之前未执行的加载任务，避免切走后仍加载
  if (slideImgLoadTimer) {
    clearTimeout(slideImgLoadTimer);
  }

  const $activeSlide = $(slickInstance.$slides[currentIndex]);
  const $targetImg = $activeSlide.find('.third-slide-first .lazy-delay-img');

  // 仅当当前激活幻灯片为third-slide、且图片未被加载过时触发延迟逻辑
  if ($activeSlide.hasClass('third-slide') && $targetImg.attr('data-src') && !$targetImg.hasClass('loaded')) {
    // 自定义延迟时长，单位毫秒，示例为2秒，可按需修改
    const delayDuration = 2000;

    slideImgLoadTimer = setTimeout(function() {
      const realImgUrl = $targetImg.attr('data-src');
      // 预加载图片，等资源完全加载完成后再触发显示动画，避免裂图
      const preloadImg = new Image();
      preloadImg.onload = function() {
        $targetImg.attr('src', realImgUrl).addClass('loaded');
        $targetImg.removeAttr('data-src'); // 移除标记防止重复触发
      };
      preloadImg.src = realImgUrl;
    }, delayDuration);
  }
});

$('a[data-slide]').click(function(e) {
  e.preventDefault();
  var slideno = $(this).data('slide');
  $('.slider-for').slick('slickGoTo', slideno - 1, false);
});

3. 添加CSS过渡动画 #

通过类名控制图片显示的过渡效果，可按需调整动画参数：

.third-slide-first .lazy-delay-img {
  /* 初始状态：透明+向下偏移20px */
  opacity: 0;
  transform: translateY(20px);
  /* 过渡效果：所有属性0.6秒缓动 */
  transition: all 0.6s ease;
}

.third-slide-first .lazy-delay-img.loaded {
  /* 加载完成状态：完全显示+回到原位 */
  opacity: 1;
  transform: translateY(0);
}

关键逻辑说明 #

• 采用data-src存储真实地址，从源头阻止初始加载，不依赖slick自带的lazyLoad配置
• 使用slick官方提供的afterChange事件捕获幻灯片激活状态，比手动监听slick-active类名变化性能更好、兼容性更高
• 增加定时器清除逻辑，用户快速切换幻灯片时不会加载非激活页的图片
• 加入图片预加载判断，确保图片资源完全下载后再触发显示动画，避免动画过程中图片未加载完成的问题
• 延迟时长、动画效果、动画速度都可以通过修改对应参数自定义

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