javascript - 在滚动之前，延迟加载图像不会出现在选项卡中

Question

我知道有很多关于这个问题的话题，但我没有找到解决它的方法。我有一个带有选项卡的下拉菜单，当包含图像的选项卡处于事件状态时，直到我滚动时图像才会出现。

我尝试了其中一些，但仍然无法正常工作:

$("img.lazy").show().lazyload()
   $(window).resize()

---

 $(function() {
            $("img.lazy").show().lazyload()
            window.onload = function() {
                $(window).resize()
            };


});

FIDDLE

任何帮助将不胜感激

Answer 1

只需使用 lazySizes .这个 lazyloader 会自动检测当前和 future img 元素的任何可见性变化，并且运行速度也比旧的 jquery lazyload 快得多。

只需添加 lazysizes 脚本并添加类 lazyload 并使用 data-src 而不是普通的 src 属性。

如果您想保留 lazy 类和 data-original 标记，您还可以配置 lazysizes 以获取这些标记:

window.lazySizesConfig = window.lazySizesConfig || {};

// use .lazy instead of .lazyload
window.lazySizesConfig.lazyClass = 'lazy';

// use data-original instead of data-src
lazySizesConfig.srcAttr = 'data-original';

这是一个有效的 example of fiddle .

---

您真的不应该触发一般的调整大小事件(加载时)。许多小部件确实会监听此事件，并会在发生调整大小的情况下进行重新布局(== 对性能非常不利)。