Lazy Load не ждет клика для загрузки изображений, которые находятся выше сгиба

В настоящее время я использую 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 ответ

Я думаю, проблема в том, что событие click не связано с элементом 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>

Демо-страница плагина содержит множество примеров.

Источник
Другие вопросы по тегам