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

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

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

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

Вот обсуждение 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;
    });
});

person David Garcia    schedule 01.10.2012    source источник
comment
Как и в вашем вчерашнем вопросе, трудно летать вслепую - дать рабочий ответ, не имея возможности увидеть с помощью инструментов разработки, как все себя ведет. Разместите jsfiddle или ссылку на свою онлайн-песочницу.   -  person Systembolaget    schedule 01.10.2012


Ответы (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 )

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

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

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

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

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

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

Демо

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);
    })
});
person acarabott    schedule 17.12.2012
comment
Это было большим подспорьем для меня. В верхнем примере кода отсутствует последний }) tho. - person AllInOne; 23.04.2013
comment
Спасибо @AllInOne, исправил. - person acarabott; 07.07.2014
comment
Я не могу понять, почему вы использовали Math.max вместо того, чтобы использовать только $images.length-1. Не могли бы вы объяснить, почему? Спасибо - person Luca Reghellin; 03.08.2015
comment
кто-нибудь может объяснить, почему для Math.max здесь? - person Luca Reghellin; 07.08.2015