8

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

基本上，lazyload 有效，但只有在我稍微滚动页面之后。

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

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

13 回答 13

12

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

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

但是如果你想加载所有图像ready，为什么需要延迟加载呢？你可以只使用$.animate.

于 2012-07-10T18:58:53.070 回答
5

只需在 .lazyload() 之后添加它，它就会触发滚动并显示图像

$(window).trigger('scroll');
于 2013-01-16T11:21:00.803 回答
3

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

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

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

简而言之：为图像添加宽度和高度。没有它们，延迟加载将无法正常工作。

于 2013-01-17T09:38:07.467 回答
2

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

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

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

于 2014-12-04T07:24:34.763 回答
1

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

除非您对其进行限制，否则使用“出现”将显示所有内容。就我而言，我只想在加载时显示前 3 个。其余的像往常一样懒加载。

$("img.lazy:lt(3)").trigger('appear');
于 2016-12-12T14:53:52.243 回答
0

我对隐藏元素有同样的问题，这是一个简单的解决方法，但它有效。当我点击页面时，我触发滚动事件来强制延迟加载脚本。您可以对事件调整大小做同样的事情

$(document).ready(function () {
    $("img").lazyload({
        event: "lazyload",
        effect: "fadeIn",
        effectspeed: 2000
    });
    $(window).resize(function () {
        $(this).trigger("scroll");
    }); 
});
于 2015-02-22T19:10:59.950 回答
0

尝试传递附加参数。

跳过不可见：假

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

于 2012-09-12T17:36:23.907 回答
0

我遇到了同样的问题，并找到了解决方案。请注意，我的图像放置在通过 ajax 调用填充的 div 中。

只需在 1.8.4 版本的延迟加载源（第 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()”的调用添加到任何其他需要的事件中。

于 2013-05-15T13:55:37.523 回答
0

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

<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');
于 2013-09-06T01:59:54.157 回答
0

简而言之：为图像添加宽度和高度。没有它们，延迟加载将无法正常工作。

你应该提前加载占位符；像这样：</p> 

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

接着

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

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

于 2016-06-25T07:34:16.503 回答
0

增加failure_limit。

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

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

于 2017-08-23T12:25:03.657 回答
0

这是可行的解决方案，但由于某种原因不是很好：

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

每次延迟加载插件加载图片时，都会调用此函数并模拟窗口触发器“滚动”，所以这对我来说是一个解决方案

于 2017-01-20T17:30:43.297 回答
-1

我正在处理同样的问题，我注意到这个问题只发生在图像放置在最初隐藏的 div 中时（即显示：无；）

于 2012-08-09T12:03:26.737 回答