使用动态标签延迟加载图像？答案

【问题标题】：LazyLoading Images with Dynamic Tabs?使用动态标签延迟加载图像？
【发布时间】：2015-09-10 18:41:24
【问题描述】：

我正在尝试使用动态标签延迟加载图像。我的代码基本上是标签内容中的图像：w3school

我正在使用lazyload library（我也尝试过其他人，但没有运气）。

无论如何，使用该延迟加载插件，它仍会在所有选项卡窗格中加载所有图像（不是延迟加载），但我只希望在查看时加载活动选项卡窗格类，并且不加载非活动选项卡窗格加载直到在视图中处于活动状态。

$("img.lazy").lazyload({
    skip_invisible : true
});

它有效，但仅在触发 1px+ 滚动时才有效。有什么想法或解决方法吗？我正在尝试一种解决方法来为导航选项卡的onclick 嵌入一个侦听器，但它不起作用，因为 我认为 在调用滚动触发器之前选项卡内容尚未更新。或者对于动态标签，还有比这更好的选择吗？

【问题讨论】：

Native image lazy loading 即将在 Chrome 75 中推出！

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

使用lazysizes。这个惰性加载器会自动检测当前和未来 img 元素的可见性变化。

只需包含脚本，添加类lazyload 并使用data-src 而不是src。

【讨论】：

【解决方案2】：

我不会使用lazysizes 插件，因为它有数百行代码仅用于图像延迟加载。我认为在您的情况下，您可以使用像 justlazy 这样的微插件。它是without jQuery，非常轻量级和高效。

首先，您必须定义图像占位符（在此代码示例中为标签编号 1）：

<span data-src="path/to/image1" data-alt="alt" data-title="title"
      class="image-placeholder-tab-1">
</span>
<span data-src="path/to/image2" data-alt="alt2" data-title="title2"
      class="image-placeholder-tab-1">
</span>

还可以使用 img-tag 对 SEO 更友好。然后您必须将图像的低质量版本设置为 src 属性的值。另一种选择是将 srcset 属性用于响应式图像（请参阅 demo）。

第二步是在特定选项卡打开时加载图像。因此，该库具有通过自定义事件加载图像的灵活方式。

为方便起见，只需将以下代码添加到您的选项卡按钮：

// e.g. for tab 1
Justlazy.lazyLoad("image-placeholder-tab-1");

【讨论】：