fancybox 禁用图像预加载答案

【问题标题】：fancybox disable image preloadingfancybox 禁用图像预加载
【发布时间】：2026-01-22 01:15:01
【问题描述】：

开始在我们的应用程序中试用这个 fancybox3 插件来缩放缩略图图像，它可以在桌面和移动浏览器上完美运行。

在购物车中添加了可以购买的产品缩略图的应用中。如果我从购物车中删除一个产品（它的图像），它会从购物车中删除，但是，如果我缩放购物车的剩余产品图像之一并浏览它，仍然会在那里显示已删除的产品。我希望只看到购物车中的产品图片。

我尝试使用 preload: 0 选项，但这对我不起作用。 Fancybox 通过以下方式启动

$('[data-fancybox="images"]').fancybox({
  idleTime : false,
  loop: true,
  transitionEffect : "fade",
  animationDuration: 333,
  buttons: [
      'close'
  ],
  protect: true,
  infobar: false,
  preload: 0
});

非常感谢您对这项工作的任何帮助。

谢谢

【问题讨论】：

标签： fancybox fancybox-3

【解决方案1】：

您似乎误解了“预加载”的概念。该脚本在显示之前预加载图像，但这意味着它在显示完整图像之前显示加载图标。如果您禁用预加载并提供完整图像的尺寸（宽度/高度），则脚本将在加载完整图像时显示缩略图。如果您想让您的应用/网页看起来更具交互性，这是一个很棒的功能（例如，用户不会盯着带有加载图标的黑色叠加层，而是会看到一些有用的东西）。

但是您所描述的听起来像是“缓存”，而 fancyBox 并不是缓存 dom 元素。因此，如果您在图库中看到某些内容，则表示您的页面中存在相应的元素。

因此，请确保您的产品实际上已从 dom 中删除，或者尝试使用“选择器”选项调整选择器以仅匹配“实际”产品，例如：

$().fancybox({
  selector : '.fancybox:not(.removed)'
});

显然，您应该调整它以满足您的需求。由于您没有提供任何详细信息，因此我无法创建完整的示例。

【讨论】：

【解决方案2】：

@Janis，非常感谢您对“预加载”概念的澄清。

你说得对 dom 仍然持有被移除的项目。删除后，该 div 很简单设置为不显示。

首先，我添加了代码以从 dom 中删除 div，但这导致页面刷新，这是我们不希望的。

接下来尝试了选择器选项，它工作得很好。

function hideCartItem(id) {
    var divItem = document.getElementById("divCartItem" + id);
    var elem = "#divCartItem" + id
    if (divItem != null) {
       $(elem).hide();
       $(elem).remove();
       // added code 
       $('[data-fancybox="images"]').fancybox({
          divItem: '.fancybox:not(.removed)'
       });
     }
}

非常感谢您的帮助。非常感谢！

【讨论】：