Question

我正在尝试使用lazyload来仅加载可见的图像（因为我的网站是响应式的，并且某些内容被隐藏了display：none给较小屏幕上的客户端）。

基本上，lazyload可以工作，但只有在我滚动页面之后才会这样。

这是我正在使用的延迟加载设置，即使将阈值设置为2000px（超过整个页面高度），它仍然只在用户滚动页面后加载图像（甚至1 px）。此错误仅出现在webkit浏览器中。

$(document).ready(function () {
    $("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});

Answer 1

我认为这可能是threshold参数的一些不当行为，但您仍然可以根据this page手动触发加载：

<script type="text/javascript">
  $(document).ready(function () {
      $("img")
         .lazyload({
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000
           })
         .trigger("lazyload");
  });
</script>

但是如果要加载ready上的所有图像，为什么还需要lazyload？您可以使用$.animate。

Answer 2

只需在.lazyload（）之后添加它，它将触发滚动并显示图像

$(window).trigger('scroll');

Answer 3

您需要为图像设置宽度和高度。

如果未设置宽度和高度，jQuery将在document.load事件中报告Webkit浏览器中不可见的图像。当skip_invisible为true时，Lazy Load将忽略图像，这意味着它不会尝试确定是否应加载图像。他们会在你第一次滚动时加载。

如果您设置skip_invisible是false插件，则会尝试确定是否应加载图片。但是，由于您没有设置宽度和高度，因此所有图像的大小均为0x0或1x1。因此，当插件启动时，所有图像都在视口中（因为它们的大小）。因为图像在视口中，所以Lazy Load将指示将它们全部加载。

简而言之：为图像添加宽度和高度。如果没有它们，Lazy Load将无法正常工作。

Answer 4

我不确定何时添加，但您可以手动触发“出现”事件到某些或所有（取决于css选择器）出现：

$("img.lazy").trigger('appear');

从这里得到这个：http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/

Answer 5

我有同样的问题。它们位于滚动div中，但只会在初始滚动后加载。

使用＆＃39;出现＆＃39;将向他们展示所有，除非你限制它。在我的情况下，我只想显示前3个加载。其他人像往常一样懒得加载。

$("img.lazy:lt(3)").trigger('appear');

Answer 6

尝试传递其他参数。

skip_invisible：false

默认情况下此参数为true，因此当插件启动它的作业时，您的图像似乎不可见。当您在网站上使用任何预加载器时，可能会发生这种情况。

Answer 7

我遇到了同样的问题，并为此找到了解决方案。请注意，我的图像被放置在通过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（）”的调用添加到任何其他所需事件。

Answer 8

我有一个类似的问题，在ajax调用之后图像不会加载，直到我滚动（即使我只是滚动1px它会加载）。我发现我需要为我的图像添加高度和宽度，如Mika Tuupola所说。我的图像是动态加载的，是不同的图像大小，并从foreach循环加载。我将通用宽度和高度属性添加到图像标记然后在lazyload加载图像后删除了属性，以便显示正确的图像大小。

<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">

$('img.lazy').lazyload({
    skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');

Answer 9

我对隐藏元素有同样的问题，是一个简单的解决方法，但它的工作原理。当我点击页面时，我触发滚动事件以强制执行lazyload脚本。您可以使用事件调整大小

执行相同的操作

$(document).ready(function () {
    $("img").lazyload({
        event: "lazyload",
        effect: "fadeIn",
        effectspeed: 2000
    });
    $(window).resize(function () {
        $(this).trigger("scroll");
    }); 
});

Answer 10

简而言之：为图像添加宽度和高度。如果没有它们，Lazy Load将无法正常工作。

你应该提前加载占位符;像这样：

<img src="./images/grey.gif" alt="" style="display:none">

然后

$("img.lazy").lazyload({placeholder : "images/grey.gif"});

如果将图像的宽度设置为100％，则会提供宽度和高度。这解决了我的问题。

Answer 11

这是一个有效的解决方案，但由于某种原因不是很好：

$("img").lazyload({
    /* Image loaded callback function */
    load: function() {
        $(window).trigger('scroll');
    }
});

每次lazyload插件加载图片时，都会调用此函数并模拟窗口触发器'scroll'，这对我来说是一个解决方案

Answer 12

增加 failure_limit 。

滚动页面插件循环后卸载图像。循环检查图像是否可见。默认情况下，当找到视口外的第一个图像时，循环停止。这基于以下假设。页面上的图像顺序与HTML代码中的图像顺序相同。有些布局假设这可能是错误的。

将failure_limit设置为10会导致插件在找到折叠后的10张图像后停止搜索要加载的图像。

Answer 13

我正在处理同样的问题，我注意到只有当图像放在最初隐藏的div内时才会出现此问题（即display：none;）

延迟加载不会加载可见图像

13 个答案: