I know that there are many topic about this issue but I did not found a solution to fix it. I have a dropdown menu with tabs and when the tab which contain a image is active, the image doesn't appear until I scroll.

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

I tried some of these but it's still not working :

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

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

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


});

FIDDLE

Any help would be appreciated

任何帮助,将不胜感激

2 个解决方案

#1

Simply use lazySizes. This lazyloader detects any visibility changes automatically for current and future img elements and also runs a lot faster than the old jquery lazyload.

只需使用lazySizes。这个lazyloader会自动检测当前和未来img元素的任何可见性更改,并且运行速度比旧的jquery lazyload快得多。

Simply add the lazysizes script and add the class lazyload and use the data-src instead of the normal src attribute.

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

In case you want to leave the class lazy and the data-original markup, you can also configure lazysizes to take those:

如果你想让类懒惰和数据原始标记,你也可以配置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';

Here is a working example of fiddle.

这是一个小提琴的工作示例。

You really shouldn't trigger a general resize event (on load). A lot of widgets do listen for this event and will do a re-layout in case a resize happens (== really bad for performance).

你真的不应该触发一般的resize事件(加载时)。很多小部件都会侦听此事件,并会在发生调整大小时进行重新布局(==对性能非常糟糕)。

#2

Documentation: http://www.appelsiini.net/projects/lazyload

States you can trigger via event.

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

I changed the classes of these to images to lazymenu (in case you have other lazy images).

我将这些类更改为lazymenu(如果你有其他懒人图像)。

Then, added this line to your top #nav .dropdown_trigger:

然后,将此行添加到您的顶部#nav .dropdown_trigger:

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

Then, updated you lazy call to:

然后,更新你懒惰的电话:

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

$(“img.lazymenu”)。show()。lazyload({event:'click'});

Fiddle: https://jsfiddle.net/zkbqLxqv/10/

#1