1

我在一个网站上使用了 zurb 的基础，该网站有很多分布在一些标签上的图像。加载非常重，所以我使用 jQuery Lazyload 来解决这个问题。它工作得很好，除了它只在第一个选项卡上加载图像，这是默认情况下处于活动状态的选项卡。其他选项卡中的图像仅在滚动时加载。即使你只做一点点。

那么在标签之间导航时如何重新激活 Lazyload 呢？

4

2 回答 2

0

我尝试了很多修复，包括 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()"添加到您的tabs。像这个例子

<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>
于 2015-04-29T21:44:01.210 回答
0

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

于 2015-05-01T09:07:57.417 回答