1

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

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

我怎样才能做到这一点？

4

3 回答 3

2

默认情况下，当图像出现在屏幕上时会加载它们。如果您希望图像更早加载，您可以设置阈值参数。将阈值设置为 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 });
});

或类似的东西。

于 2012-09-24T06:04:20.643 回答
0

在运行的网站演示页面中，显示第一行页面正在加载，请参阅此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);
              }
              */
          });
      });​
于 2012-09-24T06:05:01.557 回答
0

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

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
于 2013-01-27T21:27:17.253 回答