我正在寻找一种方法来确保访问者不必从我的网站下载不必要的数据，但如果访问者决定请求，我也希望所有数据都可用。
到目前为止，我所做的是将所有信息放在不同标签中，并在第一个标签中显示纯文本信息。这非常有效，文本首先显示，访问者不是更明智的。问题是其他标签的内容是在后台读取的，虽然这在快速T1线路上不是问题，但对于任何普通的手机用户来说都不好。说实话，我的网络服务器如果没有将200张图像推送给那些无法查看它们的人，也不会感到难过。
我一直试图阻止加载没有“uk-active”类的选项卡的内容。我浏览了这个知识的好地方，我找到了一些解决方案，其中每个选项卡都是一个单独的html页面，然后通过ajax将它们加载到选项卡中。问题是我不能在不改变我网站上的所有内容的情况下进行这样的设置。
我还看到了关于何时加载图像直到它们在视口中的示例。这里的问题是选项卡在视口中，因此图像将开始加载（我认为），另一个问题是它不仅仅是图像，还有带有丰富文本的页面之后的视频，文档和页面。
我的所有标签都填充了不同类型的内容，因此我的代码可以呈现正确数量的标签，具体取决于是否存在不同类型的数据。因此，我需要首先运行所有这些，以便正确设置选项卡，然后阻止选项卡填充所提取的数据。
不同的标签有不同的代码用于加载动态内容，但其中一个标签仅适用于图片，所以让我们从那个开始。
我真的很抱歉文字的墙，只是上下文可能会让我更容易帮助...现在让我们看看一些代码：）
我的图片库标签由以下代码填充
?>
<div class="uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-3">
<a class="uk-thumbnail uk-text-center" title="<?php echo $this->product->product_name; ?>" data-uk-lightbox="{group:'group1'}" href="<?php echo $image; ?>">
<img width="auto" height="auto" alt="" src="<?php echo $image; ?>">
</a>
</div>
<?php
$ image是一个数组，它是通过合并包含以下类型图像的不同数组创建的（gif | GIF，jpg | JPG，png | PNG和svg）。
父标签的ID为“#prod_gallery”，当它处于活动状态时，它的类别为“.uk-active”。
所以，我正在考虑一个简单的jQuery，它将包含上面的代码并阻止它执行，直到jQuery("#prod_gallery").hasClass("uk-active")返回'true'。它需要在加载页面和单击选项卡后检查这一点。
到目前为止这么好，问题是我不知道如何编写这段代码和/或如果我从正确的角度看它。
任何可以指向解决方案任何方向的输入都将非常受欢迎。
非常感谢你一次又一次，对不起文字之墙。