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

有同样的问题。查看了lazyload代码。如果“滚动”在事件的任何地方，它会忽略其他所有内容。最初我做了一个页面滚动触发器。但我有一个css问题，窗户认为图像在它的原始位置。所以它认为它不在页面上。：（

但我确实注意到lazyload将始终在“出现”事件上运行。如此改变

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

到

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

会奏效。虽然它会强制所有$（匹配）图像加载，即使它们不可见。我知道不是最佳解决方案。但...

懒惰加载不适用于filtrify和Isotope

1 个答案: