Не удается заставить jQuery Masonry + Infinite Scroll работать в Safari и Chrome. - PullRequest
Новая
       28

Не удается заставить jQuery Masonry + Infinite Scroll работать в Safari и Chrome.

2 голосов
/ 16 марта 2011

Здравствуйте, я пытаюсь настроить сайт с помощью jQuery Masonry и Infinite scroll, но мне просто не удается заставить его работать в Chrome или Safari на OSX.

Сайт разработчика - http://bit.ly/hYJ3Cq

Я не получаю никаких ошибок JavaScript в консоли.

Вещи, которые я пробовал:

  • Настройка ширины / высоты изображения внутри кладки divs
  • с использованием более старой библиотеки jquery
  • перемещение js в голову вместо нижнего колонтитула
  • добавление type = "text / javascript" к тегам скрипта
  • проверка HTML
  • изменение между jQuery (окно) .load (и jQuery (документ) .ready (

Этот код, с которым я работаю, очень похож на демонстрационный код, который отлично работает: 

    jQuery(window).load(function(){

    jQuery('.hfeed').masonry({
        singleMode: true, 
        itemSelector: '.box'
    });

    jQuery('.hfeed').infinitescroll({
      navSelector  : '.pagination',  // selector for the paged navigation 
      nextSelector : '.pagination .next',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      loadingImg : '/wp-content/themes/sprppl/images/loader.gif',
      loadingText  : "Loading...",
      donetext  : 'No more pages to load.',
      debug: false,
      errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   }
      },
      // call masonry as a callback
      function( newElements ) { jQuery(this).masonry({ appendedContent: jQuery( newElements ) }); }
    );      

    });

Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 16 марта 2011

http://desandro.com/demo/masonry/docs/infinite-scroll.html

Посмотрите на "Tumblr Issue". Вы должны установить теги размера изображения (в <img/>, а не <div/>) или использовать setTimeout () 

// call masonry as a callback, after 1000 milliseconds
function( newElements ) {
  setTimeout(function() {
    $wall.masonry({ appendedContent: $(newElements) });
  }, 1000);
}

также вы должны установить columnWidth, я думаю (я не знаю сценарий, но это то, что они говорят в документации)

...