2017-01-10 28 views
0

JavaScript/jQueryでかなり新しいです。 以下の例では、私のリストのwaterfall-itemごとに.eachという部分を呼び出しています。しかし、何らかの理由で$img.loadが呼び出されることはありませんか?Image.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>

+1

ロード関数への参照をチェックhttps://api.jquery.com/load-event/ – user1097772

+0

私はそのページを見たことがありますが、実際にすべてを理解していないか、正確に何を探しているのか分かりません。 –

+1

jqueryコードを '$(document).ready(function(){})'の中に入れてみましたか? – Manwal

答えて

0

このようにそれを解決:

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

 

 
});

関連する問題