如何在选项卡之间导航时重新激活延迟加载

Question

我使用zurb的基础来开发一个网站，该网站在许多选项卡上分布着大量图像。加载起来非常繁重，所以我使用jQuery Lazyload来解决这个问题。它运行良好，除了它只在第一个选项卡上加载图像，这是默认处于活动状态的选项卡。其他选项卡中的图像仅在滚动时加载。即使你只是一点点。

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

Answer 1

我已经尝试了许多修复程序，包括 Lazyload 在网站上的修复程序。当内容位于选项卡内时，它们都不起作用。但是由于 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

你自己的答案显然是一个糟糕的黑客。一般来说，我建议使用lazySize。除其他改进外，它还会自动检测任何图像可见性更改。因此，您不必费心触发任何东西。