jquery - 遅延ロードがfiltrifyとIsotopeで機能しない

Question

<script type="text/javascript">
$(function() {

    $("ul#container img").lazyload({ 
        event : "mouseover",
        effect : "fadeIn"
    });

    var container = $("#container");

   container.isotope({
        itemSelector : 'ul#container > li',
        layoutMode : 'masonry'
    });


  var ft =  $.filtrify("container", "placeHolder", {
        block    : "data-original",
        hide     : false,
        close    : true,
        callback : function ( query, match, mismatch ) {
          /*
        Extend jQuery with an "inview" selector to 
        select elements that are in the visible
        part of the page (at least partiacialy) 
    */
    $.extend($.expr[':'],{
        inview: function(el) {
            var e = $(el),
                w = $(window),
                wt = w.scrollTop(),
                wb = wt + w.height(),
                et = e.offset().top,
                eb = et + e.height();

            return ( (eb >= wt) && (et <= wb) );
        }
    });
     $("ul#container img").lazyload({ 
        event : "scroll filter",
        effect : "fadeIn"
    });
    $(match).find("img:inview").trigger("filter");
            container.isotope({ filter : $(match) });
            if ( mismatch.length ) $("div#reset").show();
            else $("div#reset").hide();
             }
    });
    $("div#reset span").click(function() {
        ft.reset();
    });

});
</script>

Answer 1

同じ問題がありました。レイジーロードコードを調べました。「スクロール」がイベントのどこかにある場合、他のすべては無視されます。最初に、ページスクロールトリガーを行いました。しかし、ウィンドウが画像が元の場所にあると考えるCSSの問題がありました。それで、それはページから外れていると思いました。:(

ただし、lazyload は常にイベント「appear」で実行されることに気付きました。とても変化しています

$(match).find("img:inview").trigger("filter");

に

$(match).find("img:inview").trigger("appear");

動作します。ただし、表示されていない場合でも、すべての $(match) 画像が強制的に読み込まれます。私が知っている最善の解決策ではありません。しかし...