加载图像与动态选项卡

LazyLoading Images with Dynamic Tabs?

本文关键字：选项 动态 图像 加载      更新时间：2023-09-26

我试图用动态选项卡延迟加载图像。我的代码基本上是这样的，在选项卡内容中的图像:w3school

我正在使用lazyload库(我也尝试过其他库，但没有运气)。

无论如何，lazyload插件，它仍然会加载所有的图像(不是惰性加载)在所有的选项卡窗格，但我只希望活动的选项卡窗格类加载时，查看和非活动的选项卡窗格不加载，直到活动在视图

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

它工作，但只有当1px+滚动被触发。有什么想法或解决方法吗?我正在尝试一个解决方案来嵌入一个监听器的onclick的导航选项卡，但它不工作，因为我认为选项卡内容还没有更新之前滚动触发器被调用。或者对于动态选项卡是否有更好的选择?

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

只需包含脚本，添加lazyload类，并使用data-src代替src。

我不会使用lazysizes插件，因为它有数百行仅用于图像延迟加载的代码。我认为在你的情况下，你可以使用像justlazy这样的微插件。它不需要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属性(参见演示)。

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

为了更简单，只需将以下代码添加到选项卡按钮中:

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

相关文章：