Bootstrap模态框触发unveil懒加载仅首次生效问题求助

看起来你遇到的核心问题是Unveil插件的单次事件绑定机制，加上模态框显示时机的问题。让我拆解一下原因和解决方案：

问题根源 #

1. Unveil插件内部用了.one("unveil")给每个懒加载图片绑定事件，这意味着每个图片只会被触发一次懒加载逻辑。
2. 你之前绑定的是show.bs.modal事件，此时模态框还未完全显示，内部图片仍处于:hidden状态，Unveil的检查逻辑会直接跳过隐藏元素（看插件代码里的if ($e.is(":hidden")) return;）。
3. 重复调用$("img.lazy").unveil()不会对已经绑定过事件的图片生效，反而会造成不必要的重复绑定。

修复方案 #

我们需要在模态框完全显示后，针对当前模态框内的懒加载图片手动触发懒加载逻辑，具体步骤如下：

1. 替换事件为shown.bs.modal #

这个事件会在模态框完全显示、图片变为可见后触发，确保Unveil能检测到这些图片。

2. 仅触发当前模态框内的图片 #

避免全局操作，只处理当前打开的模态框里的懒加载图片，提升性能。

修改后的代码如下：

// 给所有模态框绑定显示完成事件
$('.product_images_modal').on('shown.bs.modal', function() {
  // 找到当前模态框内的懒加载图片，触发unveil事件
  $(this).find('img.lazy').trigger('unveil');
});

备选方案：触发全局重新检查 #

如果你希望Unveil重新检查所有可见的懒加载图片（包括页面上的其他元素），也可以直接触发插件内置的lookup.unveil事件：

$('.product_images_modal').on('shown.bs.modal', function() {
  $(window).trigger('lookup.unveil');
});

为什么这能解决问题？ #

• 当模态框完全显示后，图片从hidden变为visible，此时触发unveil事件，Unveil会执行预绑定的懒加载逻辑（替换src、触发回调）。
• 因为用了.trigger('unveil')，只会触发那些还没执行过懒加载的图片（因为.one()绑定的事件在第一次执行后会被移除，已经加载的图片不会重复执行）。

保留原有全局懒加载 #

继续保留你在document.ready里的全局懒加载调用，它负责处理页面初始可见的图片：

$(document).ready(function lazyload() {
  $("img.lazy").unveil(300, function() {
    $(this).load(function() {
      this.style.opacity = 1;
    });
  });
});

这样调整后，不管你打开哪个模态框，里面的懒加载图片都会在模态框显示后被正确加载，不会出现只有首次打开生效的问题。

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