No se puede hacer que JQuery Masonry + Infinite Scroll funcione en Safari y Chrome

Question

Hola, estoy tratando de configurar un sitio usando jQuery Masonry y Infinite Scroll, pero parece que no puedo hacer que funcione en Chrome o Safari en OSX.

El sitio de desarrollo es http://bit.ly/hyj3cq

No recibo ningún error de JavaScript en la consola.

Cosas que he probado:

• Configuración del ancho de la imagen/altura dentro de los divs de mampostería
• Uso de la biblioteca de jQuery más antigua
• moviendo js a la cabeza en lugar de pie de página
• Agregar type = "Text/JavaScript" a las etiquetas de script
• Validación de HTML
• Cambio entre jQuery (ventana) .load (y jQuery (documento) .Ready (

Este es el código con el que estoy trabajando con el que es muy similar al código de demostración que funciona bien:

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

    });

Cualquier ayuda sería muy apreciada.

Answer 1

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

Mire el "problema de tumblr". Debe configurar las etiquetas de tamaño de la imagen (en el <img/> no la <div/>) o use un setTimeOut ()

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

También debe establecer un ancho de columna, supongo (no conozco el guión, pero eso es lo que están diciendo en la documentación)