延迟加载不会等待点击加载高于首屏的图像

时间:2015-12-06 01:51:35

标签: javascript jquery lazy-loading jquery-lazyload

我目前正在图像繁重的网页上使用Lazy Load,我不希望加载图片直到我点击按钮。 Lazy Load允许您拥有这样的事件触发器,但我只能让它部分工作。

折叠下方的图片等待点击显示,但是当页面最初启动时,会加载首屏上方的任何内容。这是无法预防的事情,还是我做错了什么?

以下是我正在使用的代码。

<body>

  <script src="jquery.js"></script>
  <script src="jquery.lazyload.js"></script>

  <img src="blank.gif" class="lazy" data-original="image.png" style="height: 500px; width: 500px;">

  <script>
     $("img.lazy").lazyload({
       event : "click",
       effect : "fadeIn"
     });
  </script>

</body>

1 个答案:

答案 0 :(得分:0)

我认为问题是,click事件没有绑定到html元素,例如一个按钮。该插件无法开箱即用。

所以,我会使用另一个插件(例如justlazy),它更适合您的特殊用例。

&#13;
&#13;
<body>

  <script src="jquery.js"></script>
  <script src="justlazy.js"></script>
  
  <span data-src="default/image" data-alt="some alt text" title="some title"
      class="justlazy-placeholder">
  </span>

  <script>
    $("#someButton").click(function() {
      $(".justlazy-placeholder").each(function() {
        Justlazy.lazyLoad(this);
      });

      return false;
    });
  </script>

</body>
&#13;
&#13;
&#13;

该插件的演示页面提供了大量示例。