【问题标题】: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)'
             });
           }
      }
      

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

      【讨论】: