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 问题，windows 认为图像在它的原始位置。所以它认为它不在页面上。:(

但是我确实注意到延迟加载将始终在事件“出现”时运行。如此变化

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

至

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

将工作。尽管它会强制所有 $(match) 图像加载，即使它们不可见。不是我知道的最佳解决方案。但...