2

私はこのプロジェクトを使用しています: https://github.com/cowboy/jquery-throttle-debounce

私のコードはある程度機能していますが、デバウンスは無視されています。そのため、画像が読み込まれるたびにウォーターフォール関数が呼び出されますが、2 秒の遅延は考慮されていません。エラーは表示されていません。

これを実装する正しい方法は何ですか? これを3時間いじっていますが、解決策が見つかりません。

(function($) {
  $(document).ready(function(e) {

    var $waterfall = $('.waterfall');
    if ($waterfall.length) {
      $waterfall.waterfall({});
    }

    // sort the waterfall when images are loaded
    var $waterfall_images = $waterfall.find('img');
    $waterfall_images.each(function(j, image) {
      var $img = $(image);

      $img.load(function() {
        $.debounce(2000, $waterfall.waterfall('sort'));
      });

    });

  });
})(jQuery);
<ul class="waterfall">
  <li class="waterfall-item">
    <a href="hidden link" title="hidden title">
      <img alt="hidden alt" title="hidden title" data-srcset="hidden in this example" data-src="also hidden in this example" src="still hidden in this example" data-sizes="(min-width:440px) 300px, 95vw" class=" lazyloaded" sizes="(min-width:440px) 300px, 95vw"
      srcset="think I'll hide this one too">
      <span class="waterfallImgOverlay"></span>
    </a>

  </li>
</ul>

4

1 に答える 1

1

参照を割り当てるのではなく、メソッドを呼び出しています。最も簡単なことは、関数でラップすることです。2 つ目は、debounce がメソッドを返すことです。そのため、返されたものを保存してから、そのメソッドを呼び出す必要があります。

(function($) {
  $(document).ready(function(e) {

    var $waterfall = $('.waterfall');
    if ($waterfall.length) {
      $waterfall.waterfall({});
    }

    var waterfallSort = $.debounce(2000, function(){ $waterfall.waterfall('sort'); });

    // sort the waterfall when images are loaded
    var $waterfall_images = $waterfall.find('img');
    $waterfall_images.each(function(j, image) {
      var $img = $(image);

      $img.load( waterfallSort );

    });

  });
})(jQuery);
于 2017-01-10T13:07:14.857 に答える