No se puede hacer que JQuery Masonry + Infinite Scroll funcione en Safari y Chrome
-
25-10-2019 - |
Pregunta
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.
Solución
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)