Can't get jQuery Masonry + Infinite Scroll to work in Safari and Chrome
-
25-10-2019 - |
Pergunta
Hi I am trying to setup a site using jQuery Masonry and Infinite scroll but I just can't seem to get it to work in Chrome or Safari on OSX.
The Dev site is http://bit.ly/hYJ3Cq
I am not getting any javascript errors in the console.
Things I've Tried:
- Setting image width/height within the masonry divs
- using older jquery library
- moving js to head instead of footer
- adding type="text/javascript" to the script tags
- validating html
- changing between jQuery(window).load( and jQuery(document).ready(
This is the code I am working with which is very similar to the demo code that works fine:
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 ) }); }
);
});
Any help would be hugely appreciated.
Solução
http://desandro.com/demo/masonry/docs/infinite-scroll.html
Look at the "Tumblr Issue". You should set the image size tags (in the <img/>
not the <div/>
) or use a setTimeout()
// call masonry as a callback, after 1000 milliseconds
function( newElements ) {
setTimeout(function() {
$wall.masonry({ appendedContent: $(newElements) });
}, 1000);
}
also you should set a columnWidth, I guess (I don't know the script but that's what they're saying in the documentation)
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow