Lazy Load + Isotope

Pour obtenir des isotopes du tri/filtrage de travailler avec lazyload vous devez faire ce qui suit.

jQuery(document).ready(function($) {
    var $win = $(window),
        $con = $('#container'),
        $imgs = $("img.lazy");

    $con.isotope();

    $con.on('layoutComplete', function(){
        $win.trigger("scroll");
    });

    $imgs.lazyload({
        failure_limit: Math.max($imgs.length - 1, 0)
    });
});

Explication

Selon les docs ( http://www.appelsiini.net/projects/lazyload )

Après le défilement de la page de Chargement différé des boucles bien déchargé des images. Dans la boucle, il vérifie si l'image est devenue visible. Par défaut, la boucle est arrêté lors de la première image ci-dessous le pli (non visible) est trouvé. Ceci est basé sur l'hypothèse suivante. L'ordre des images sur la page est le même que l'ordre des images dans le code HTML. Avec certaines dispositions de cette hypothèse peut être faux.

Avec un isotope trier/liste filtrée, l'ordre des pages est certainement différente de l'HTML, donc nous devons ajuster notre failure_limit.

Comme vous pouvez le voir, nous stockons l'objet jQuery afin que nous puissions utiliser son length-1 que notre failure_limit. Si vous êtes curieux de savoir pourquoi il est length-1, c'est à cause de la case dans lazyload de la méthode de mise à jour.

if (++counter > settings.failure_limit) {
    return false;
}

Lazy load sur d'autres événements

Si vous n'êtes pas le déclenchement de votre lazyloads sur de défilement, vous devez remplacer le "scroll" déclencheur pour n'importe quel événement que vous utilisez.

Démo

http://jsfiddle.net/arthurc/ZnEhn/

Code de votre site

J'ai stocké certains jQuery objets dans des variables comme ils ont besoin d'être ré-utilisé.

jQuery(document).ready(function($) {
    var $window = $(window);
    var $images = $('#big_container .media_block img');
    var $big_container = $('#big_container');

    $images.each(function(index) {
        var item_height = $(this).attr("height");
        $(this).parent().parent().css("height",item_height);
    });


    $big_container.isotope({
        itemSelector : '.item',
        layoutMode : 'masonry',
        masonry: {
            columnWidth: 5,
        },
        sortBy : 'date',
        sortAscending : false,
        getSortData : {
            date : function ( $elem ) {
                return $elem.find('.date').text(); //Date format should be [Y-m-d H:i]
            },
            views : function( $elem ) {
                return parseInt( $elem.attr('data-views'), 10 );
              },
            //featured : function ( $elem ) {
            //return $elem.attr('data-featured');
            // },
            rates : function( $elem ) {
                return parseInt( $elem.attr('data-rates'), 10 );
              },
            comments : function( $elem ) {
                return parseInt( $elem.attr('data-comments'), 10 );
              }
        }

    });


    $big_container.on('layoutComplete', function(){
        $win.trigger("scroll");
    });

    $('#sort-by li a').click(function(){
        var $this = $(this);
        if ($(this).parent().hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents();
        $optionSet.find('.selected').removeClass('selected');
           $this.addClass('selected');
          var sortName = $(this).attr('href').slice(1);
          $big_container.isotope({ sortBy : sortName });
          return false;
    });


    $images.lazyload({
        failure_limit : Math.max($images.length-1, 0);
    })
});

OriginalL'auteur acarabott