Question

我已使用http://www.appelsiini.net/projects/lazyload此插件加载图片。

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

我该怎么做？

Answer 1

在网站演示页面运行时，显示第一行，页面加载请参阅此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);
              }
              */
          });
      });

Answer 2

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

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

使用Lazy Load加载图像

2 个答案: