惰性负载+同位素 [英] Lazy Load + Isotope

问题描述

我花了很多时间试图使同位素和惰性加载一起工作.

I've spent considerable amount of time trying to get isotope and lazy loading working together.

问题:如果用户向下滚动，则延迟加载会起作用，但是如果用户使用过滤器，则项目会显示在顶部，但图像将不会加载.

The issue: lazy loading works if the user scrolls down, however if the user uses the filters, the items show up on top but the images will not load.

这里有人遇到相同的问题，但看来他已解决了该问题.我尝试了几件事，但仍然无法正常工作.

Here is someone with the same issue, but it seems he fixed it. I tried several things but still couldnt get it working.

这里是讨论区 https://github.com/tuupola/jquery_lazyload/issues/51

非常感谢您的帮助

我正在使用的代码如下.

The code I am using is as follow.

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

推荐答案

要使同位素的排序/过滤与lazyload配合使用，您必须执行以下操作.

To get isotope's sorting/filtering to work with lazyload you have to do the following.

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代码中的图像顺序相同.在某些布局假设下，这可能是错误的.

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.

使用同位素排序/过滤列表，页面顺序肯定不同于HTML，因此我们需要调整failure_limit.

With an isotope sorted/filtered list, the page order is certainly different from the HTML so we need to adjust our failure_limit.

如您所见，我们存储了jQuery对象，因此我们可以将其length-1用作我们的failure_limit.如果您对为什么它是length-1感到好奇，那是因为以下检查了lazyload的update方法.

As you can see we store the jQuery object so that we can use its length-1 as our failure_limit. If you're curious as to why it is length-1, it's because of the following check in lazyload's update method.

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

其他事件的延迟加载

如果您没有在滚动上触发延迟加载，则需要为正在使用的任何事件交换滚动"触发器.

Lazy load on other events

If you are not triggering your lazyloads on scroll, you will need to swap the "scroll" trigger for whichever event you are using.

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

我将一些jQuery对象存储在变量中，因为它们需要重新使用.

I stored some of the jQuery objects in variables as they need to be re-used.

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

这篇关于惰性负载+同位素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！