延遲加載不與filtrify和同位素

<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>

來源

2012-10-29 Sangeet Jaiswal

我們應用了一個過濾器後，出現的結果有主要的src圖像，放置數據的原始圖像，因爲它應該做與lazyload，雖然當我向下滾動到頁面，lazyload似乎工作正常，它只是自定義觸發事件「過濾器」，似乎不工作... –

感謝編輯它Tamas ... –

有同樣的問題。通過lazyload代碼查看。如果「滾動」在事件中的任何地方，則忽略其他所有內容。最初我做了一個頁面滾動觸發器。但我有一個CSS問題，Windows認爲圖像位於原始位置。所以它認爲它離開了頁面。 :(

我也注意到但是，這種lazyload總會事件「出現」運行。因此改變

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

到

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

會工作。雖然這將迫使所有的$（匹配）圖像加載即使它們不可見我不知道最好的解決方案但是...

來源

2013-02-10 18:49:07

延遲加載不與filtrify和同位素

回答

相關問題