Ленивая нагрузка + изотоп

Я потратил много времени на то, чтобы получить изотоп и ленивую загрузку, работая вместе.

Проблема: ленивая загрузка работает, если пользователь прокручивается вниз, однако, если пользователь использует фильтры, элементы отображаются вверху, но изображения не загружаются.

Вот кто-то с той же проблемой, но, похоже, он исправил это. Я пробовал несколько вещей, но все равно не мог заставить его работать.

Вот описание https://github.com/tuupola/jquery_lazyload/issues/51

Большое спасибо за помощь

Используемый мной код выглядит следующим образом.

jQuery(document).ready(function($) {
    $('#big_container .media_block img').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 );
          }
    }

    });

    $('#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;
    });
});

ОТВЕТЫ

Ответ 1

Чтобы получить изотипную сортировку/фильтрацию для работы с lazyload, вам нужно сделать следующее.

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)
    });
});

Описание

В соответствии с документами (http://www.appelsiini.net/projects/lazyload)

После прокрутки страницы Lazy Load зацикливает, хотя выгруженные изображения. В цикле он проверяет, стало ли изображение видимым. По умолчанию цикл останавливается, когда найдено первое изображение под сгибом (не видно). Это основано на следующем предположении. Порядок изображений на странице такой же, как и порядок изображений в HTML-коде. С некоторыми предположениями о макетах это может быть неправильно.

С списком отсортированных/отфильтрованных изотопов порядок страниц, безусловно, отличается от HTML, поэтому нам нужно настроить наш failure_limit.

Как вы можете видеть, мы храним объект jQuery, чтобы мы могли использовать его length-1 как наш fail_limit. Если вам интересно, почему это length-1, это из-за следующей проверки в методе обновления lazyload.

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

Ленивая нагрузка на другие события

Если вы не запускаете свои lazyloads на прокрутке, вам нужно будет поменять триггер "прокрутки" для того, что вы используете.

Demo

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

Код для вашего сайта

Я сохранил некоторые объекты jQuery в переменных, поскольку их нужно повторно использовать.

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);
    })
});