javascript - 使用动态标签延迟加载图像？

Question

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

我正在使用 lazyload library (我也尝试过其他人，但没有成功)。

无论如何，使用那个 lazyload 插件，它仍然会加载所有选项卡 Pane 中的所有图像(不是延迟加载)，但我只希望在查看时加载事件的选项卡 Pane 类，而不希望加载非事件的选项卡 Pane 加载直到在 View 中处于事件状态。

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

它可以工作，但只有在触发 1px+ 滚动时才有效。任何想法或解决方法？我正在尝试一种解决方法，为导航选项卡的 onclick 嵌入一个监听器，但它不起作用，因为我认为选项卡内容在滚动之前没有更新触发器被调用。或者对于动态标签有比这更好的选择吗？

Answer 1

使用lazysizes .此延迟加载器会自动检测当前和 future img 元素的可见性更改。

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