Ленивая загрузка или Inview

Я использую Isotope, я пытаюсь получить ленивую загрузку 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');
    }
});

person David Garcia    schedule 30.09.2012    source источник


Ответы (1)


Плагин Images Loaded включен в Isotope, см. документацию. Обычно вы реализуете это с помощью плагина Infinite Scroll Пола Айриша. Что касается отложенной загрузки, ответы на SO прямо здесь и в других местах. Но если вы правильно реализуете бесконечную прокрутку и ваши изображения оптимизированы для быстрой загрузки с помощью ImageOptim или чего-то еще, вам, вероятно, все равно не понадобится отложенная загрузка.

person Systembolaget    schedule 30.09.2012