FIDDLE

Question

我知道有很多关于此问题的主题，但我没有找到解决方法来解决它。我有一个带标签的下拉菜单，当包含图像的标签处于活动状态时，图像不会出现，直到我滚动。

我尝试了其中一些，但它仍然无效：

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

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


});

FIDDLE

任何帮助将不胜感激

Answer 1

文档：http://www.appelsiini.net/projects/lazyload

您可以通过事件触发的状态。

我将这些图像的类改为lazymenu（如果你有其他懒人图像）。

然后，将此行添加到您的热门#nav .dropdown_trigger：

$('img.lazymenu').trigger('click');

然后，更新你懒惰的电话：

$("img.lazymenu").show().lazyload({ event : 'click' });

小提琴：https://jsfiddle.net/zkbqLxqv/10/

Answer 2

只需使用lazySizes即可。这个lazyloader会自动检测当前和未来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。

你真的不应该触发一般的调整大小事件（加载时）。很多小部件都会监听这个事件，并会在重新调整大小时进行重新布局（==对于性能非常糟糕）。

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

FIDDLE

2 个答案: