使用延迟加载的图像加载答案

【问题标题】：Image loading using Lazy Load使用延迟加载的图像加载
【发布时间】：2012-09-15 14:07:01
【问题描述】：

我已经使用http://www.appelsiini.net/projects/lazyload这个插件来加载图片了。

当我向下滚动页面图像正在加载时它工作正常，但我需要在页面加载时显示第一行图像。

我该怎么做？

【问题讨论】：

【解决方案1】：

默认情况下，当图像出现在屏幕上时会加载它们。如果您希望图像更早加载，您可以设置阈值参数。将阈值设置为 200 会导致图像在可见之前加载 200 像素。

$("img.lazy").lazyload({ threshold : 200 });

那么在你的情况下，页面的第一行有多远？

$(function() {
    var $firstRow = $('table:first tr:first'), 
    threshold = $firstRow.offset().top + $firstRow.height();
    $("img.lazy").lazyload({ threshold : threshold });
});

或类似的东西。

【讨论】：

使用 threshold : 200 后，它不会显示我的可见区域的图像。有没有其他方法可以做到这一点？
你太从字面上理解了。它们在页面下方多远？您可以使用第二种方法，即获取顶部位置的选择器来做到这一点。
对不起，其实我问错了，我想知道阈值是容器高度还是其他什么？
@absolutek 我添加了一个可能对您有更多帮助的示例。它找到第一个表的 firstRow，获取顶部和高度，然后设置阈值，以便显示第一行。

【解决方案2】：

在网站演示页面运行中，显示第一行页面加载看到这个DEMO

$(function() {
          $("img").lazyload({
              effect : "fadeIn",
              /*
              appear : function(elements_left, settings) {
                  console.log("appear");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              },
              load : function(elements_left, settings) {
                  console.log("load");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              }
              */
          });
      });

【讨论】：

【解决方案3】：

您的图片缺少宽度和高度属性。没有它们，延迟加载将无法正常工作。在不知道宽度和高度的情况下，当document.ready 事件触发时，浏览器无法知道图像在布局中的位置。正确的图像标签如下所示：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

【讨论】：