Lightbox序列按需加载图片的代码问题修复咨询

看起来你遇到的两个问题根源在于动态元素的时机控制和重复添加的判断缺失，咱们一步步来拆解解决：

问题原因分析 #

1. 第一次点击不生效：你是在点击小图后才动态添加序列图片并初始化lightbox，但原<a class="smallimage">本身已经绑定了独立的lightbox实例（rel="lightbox[bakel]"），第一次点击时，lightbox先触发了原链接的弹窗，之后才添加的序列元素还没被lightbox识别，所以第一次看不到新增图片；第二次点击时，之前添加的元素已经被初始化，所以能正常显示序列。
2. 重复添加图片：每次点击小图都会执行for循环往body里追加序列元素，没有判断这些元素是否已经存在，导致每次点击都新增一批，序列长度越来越长。

解决方案思路 #

• 添加初始化判断：用DOM标记或变量确保序列元素只被创建一次，避免重复生成。
• 统一lightbox实例：把原小图的rel改成和序列一致，调整触发逻辑，让动态添加的元素能被当前lightbox实例识别，保证第一次点击就能加载完整序列。

修改后的代码示例 #

$(".smallimage").click(function(e) {
  // 阻止默认的lightbox触发，先处理动态元素逻辑
  e.preventDefault();
  
  const imageArray = [
    "01.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg",
  ];
  
  function assignUrl(img_num) {
    return "../img/" + imageArray[img_num];
  }

  // 检查序列元素是否已存在，避免重复添加
  if (!$(".lightbox-sequence-item").length) {
    for (let i = 0; i < imageArray.length; i++) {
      const sequenceLink = $("<a/>")
        .attr("href", assignUrl(i))
        .attr("rel", "lightbox[sequence_A]")
        .addClass("lightbox-sequence-item"); // 标记序列元素，方便后续判断
      sequenceLink.append($("<img/>")
        .attr("src", assignUrl(i))
        .attr("class", "image_hidden"));
      $("body").append(sequenceLink);
    }
  }

  // 把当前点击的小图加入同一序列
  $(this).attr("rel", "lightbox[sequence_A]");
  
  // 重新初始化lightbox，让新元素被识别
  $("a[rel='lightbox[sequence_A]']").lightbox();
  
  // 手动触发当前图片的lightbox弹窗
  $(this).click();
});

对应的HTML可以提前把rel统一，也可以靠JS动态修改（上面代码已经包含修改逻辑）：

<a class="smallimage" href="../img/02.jpg" rel="lightbox[sequence_A]">
  <img src="../img/02-01.jpg">
  <h2>Title</h2>
</a>

额外优化建议 #

• 如果你的lightbox插件支持动态刷新实例（比如部分插件有refresh()方法），建议用插件提供的方法替代重新调用lightbox()，性能会更优。
• 可以把序列图片的src先设为占位图，等到lightbox切换到对应图片时再加载真实地址，进一步节省带宽（比如监听lightbox的切换事件，动态替换src）。

这样修改后就能解决你的两个问题：

1. 第一次点击小图就会加载完整序列并正常显示
2. 序列元素只会被创建一次，不会重复添加导致序列长度递增

内容的提问来源于stack exchange，提问作者Jeroen van den Heuvel