1

我正在使用同位素，我正在尝试让延迟加载http://www.appelsiini.net/projects/lazyload工作。但是我还引用了一个名为 Inview 和 ImagesLoaded 的插件。

我很难让他们工作。我的困惑在于 Inview 和 Lazy Loading 之间的区别！这两个插件执行相同的功能吗？

我最初遵循本指南http://www.haizumdesign.com/masonry-infinite-scroll-inview-a-tale-of-3-plugins/但我删除了无限滚动，因为它冻结了我的浏览器。我认为加载的 Inview 和图像足以进行延迟加载，但后来我遇到了延迟加载网站，我感到很困惑。

此外，同位素似乎已经加载了图像，所以我应该停止加载单独的 js 文件吗？

请帮帮我，以下是我的同位素配置

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').imagesLoaded(function(){
    $('#big_container').isotope({
    itemSelector : '.item',
    layoutMode : 'masonry',
    masonry: {
        columnWidth: 1,
    },
    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 );
          }
    }
    });
    }); //close imagesLoaded
    $('#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;
    });
});
$(document).on("inview", ".item", function(e) {
    var $this = $(this);
    if(!$this.hasClass('loaded')) {
        $this.addClass('loaded');
        $this.css('visibility','visible').hide().fadeIn('slow');
    }
});
4

1 回答 1

0

Image Loaded 插件包含在 Isotope 中，请参阅文档。您通常使用 Paul Irish 的 Infinite Scroll 插件来实现它。至于延迟加载，这里和其他地方都有关于 SO 的答案。但是，如果您正确地实现了无限滚动并且您的图像已针对使用 ImageOptim 或其他方式的快速加载进行了优化，那么您可能无论如何都不需要延迟加载。

于 2012-09-30T14:51:24.627 回答