延迟加载不会加载可见图像
我正在尝试使用lazyload来仅加载可见的图像（因为我的网站是响应式的，并且一些内容被隐藏了display：none给较小屏幕上的客户端）。
基本上，lazyload工作，但只有在我滚动页面之后。
这是我正在使用的延迟加载设置，即使将阈值设置为2000px（超过整个页面高度），它仍然只在用户滚动页面后加载图像（甚至1 px）。 此错误仅出现在webkit浏览器中。
$(document).ready(function () { $("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,}); }); 我认为这可能是threshold参数的一些不当行为，但您仍然可以根据此页面手动触发加载：
但是如果你想要ready所有图像，为什么还需要lazyload呢？ 你可以使用$.animate 。
只需在.lazyload（）之后添加它，它将触发滚动并显示图像
$(window).trigger('scroll');
您需要为图像设置宽度和高度。
如果未设置宽度和高度，jQuery将在document.load事件中报告Webkit浏览器中不可见的图像。 当skip_invisible为true Lazy Load将忽略图像，这意味着它不会试图确定是否应该加载图像。 他们将在您第一次滚动时加载。
如果设置skip_invisible是false插件将尝试弄清楚应该加载图像。 但是，由于您没有设置宽度和高度，因此所有图像的大小均为0x0或1×1。 因此，当插件启动时，所有图像都在视口中（因为它们的大小）。因为图像在视口中，所以Lazy Load将指示将它们全部加载。
简而言之：为图像添加宽度和高度。 如果没有它们，Lazy Load将无法正常工作。
我不确定这是什么时候添加的，但你可以手动触发“出现”事件到某些或所有（取决于css选择器）出现：
$("img.lazy").trigger('appear');
从这里得到这个：http： //yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/
我遇到过同样的问题。 它们位于滚动div中，但只会在初始滚动后加载。
使用“出现”将全部显示，除非您限制它。 在我的情况下，我只想显示前3个加载。 其他人像往常一样懒得加载。
$("img.lazy:lt(3)").trigger('appear');
尝试传递其他参数。
skip_invisible：false
默认情况下此参数为true，因此当插件启动它的作业时，您的图像似乎不可见。 当您在网站上使用任何预加载器时，可能会发生这种情况。
我遇到了同样的问题，并为此找到了解决方案。 请注意，我的图像被放置在通过ajax调用填充的div内。
只需更改1.8.4版的lazyload源（第147-150行）中的一行代码：
/* Force initial check if images should appear. */ $(document).ready(function() { update(); });
代替
/* Force initial check if images should appear. */ $(window).load(function() { update(); });
或者最终将对“update（）”的调用添加到任何其他所需事件。
我有一个类似的问题，在ajax调用之后图像不会加载，直到我滚动（即使我只是滚动1px它会加载）。 我发现我需要为我的图像添加高度和宽度，如Mika Tuupola所说。 我的图像是动态加载的，是不同的图像大小，并从foreach循环加载。 我将通用宽度和高度属性添加到图像标记然后在lazyload加载图像后我删除了属性，因此它将显示正确的图像大小。
$('img.lazy').lazyload({ skip_invisible: false }).removeClass('lazy').removeAttr('width').removeAttr('height');
我有隐藏元素的相同问题，是一个简单的解决方法，但它的工作原理。 当我点击页面时，我触发滚动事件以强制执行lazyload脚本。 您可以使用事件resize来执行相同的操作
$(document).ready(function () { $("img").lazyload({ event: "lazyload", effect: "fadeIn", effectspeed: 2000 }); $(window).resize(function () { $(this).trigger("scroll"); }); });
简而言之：为图像添加宽度和高度。 如果没有它们，Lazy Load将无法正常工作。
你应该提前加载占位符;像这样：
然后
$("img.lazy").lazyload({placeholder : "images/grey.gif"});
如果将图像的宽度设置为100％，则会提供宽度和高度。 这解决了我的问题。
这是有效的解决方案，但由于某些原因不是很好：
$("img").lazyload({ /* Image loaded callback function */ load: function() { $(window).trigger('scroll'); } });
每次lazyload插件加载图片时，都会调用此函数并模拟窗口触发器’scroll’，这对我来说是一个解决方案
增加failure_limit 。
滚动页面插件循环后，通过卸载图像。 循环检查图像是否可见。 默认情况下，当找到视口外的第一个图像时，循环停止。 这基于以下假设。 页面上的图像顺序与HTML代码中的图像顺序相同。 有些布局假设这可能是错误的。
将failure_limit设置为10会导致插件在找到折叠后的10个图像后停止搜索要加载的图像。
我正在处理同样的问题，我注意到这个问题只发生在图像放在最初隐藏的div内时（即display：none;）