没有调用Image.load函数

Question

我是JavaScript / jQuery的新手。 下面的示例会为列表中的每个瀑布项调用.each部分。但$img.load从未因某种原因被调用过？

无法弄清楚我做错了什么？

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

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

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

      $img.load(function() {
        $waterfall.waterfall({});
      });
    });

  });
})(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>

Answer 1

解决这个问题：

＆＃13;

＆＃13;

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() {
    $waterfall.waterfall({});
  });


});

＆＃13;

＆＃13;

＆＃13;