在选项卡之间导航时如何重新激活 Lazyload？

Question

我使用 zurb 的基础创建了一个网站，该网站的某些选项卡上分布着大量图像。加载很重所以我使用 jQuery Lazyload 来解决这个问题。它工作得很好，除了它只加载第一个选项卡上的图像，默认情况下是活动的。其他选项卡中的图像仅在滚动时加载。哪怕只是一点点。

那么如何在选项卡之间导航时重新激活 Lazyload？

Answer 1

我尝试了很多修复方法，包括网站上 Lazyload 中的修复方法。当内容位于选项卡内时，None 有效。但是由于 Lazyload 是由滚动触发的 我设法通过仅将页面移动 1px 来激活它。这几乎是不引人注意的。

以下是如何通过两个简单的步骤完成...

将此 javascript 添加到 html 文件 body 标签的底部

<script type="text/javascript">
      // FUNCTION TO SCROLL 1PX AND TRIGGER THE LAZY LOAD
      function tinyScroll() {
        window.scrollBy(0, 1);
      }
</script>

并将 onclick="tinyscroll()" 添加到您的 选项卡 。像这个例子

<ul>
  <li onclick="tinyScroll()" class="tab"><a href="#"></a></li>
  <li onclick="tinyScroll()" class="tab"><a href="#"></a></li>
  <li onclick="tinyScroll()" class="tab"><a href="#"></a></li>
</ul>

Answer 2

您自己的回答显然是一个糟糕的技巧。一般来说我会推荐使用lazySizes。在其他改进中，它会自动检测任何图像可见性变化。所以你不必费心去触发任何东西。

在选项卡之间导航时如何重新激活 Lazyload？

How to re-activate Lazyload when navigating between tabs?

tabs

jquery-lazyload