Question

开始试用这款fancybox3插件，在我们的应用中缩放缩略图，完美适用于桌面和移动浏览器。

在购物车中，其中添加了可以购买的产品的缩略图。如果我从购物车中移除产品（图像），它将从购物车中移除，但是，如果我缩放购物车的其余产品图像之一并浏览它，仍然在那里显示已移除的产品。我期待只看到购物车中的产品图片。

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

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

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

谢谢

Answer 1

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

但你所描述的听起来像＆＃34;缓存＆＃34;和fancyBox不缓存dom元素。因此，如果您在图库中看到某些内容，则表示您的页面中存在相应的元素。

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

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

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

Answer 2

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

你对dom仍然拿着被移除的物品你是对的。删除后，div很简单，设置为display none。

首先，我添加了代码来删除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)'
       });
     }
}

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

fancybox禁用图像预加载

2 个答案: