0

我目前在图像繁重的网页上使用延迟加载，并且我不希望在单击按钮之前加载图像。延迟加载允许您拥有这样的事件触发器，但我只能使其部分工作。

首屏下方的图像会等待点击出现，但首屏上方的任何内容都会在页面最初打开时加载。这是无法避免的事情，还是我做错了什么？

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

<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>
4

1 回答 1

0

我认为问题在于，单击事件未绑定到 html 元素，例如按钮。该插件无法开箱即用地处理此问题。

所以，我会使用另一个插件（例如justlazy），它更适合您的特殊用例。

<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>

该插件的演示页面提供了很多示例。

于 2015-12-06T11:19:18.403 回答