У меня есть галерея изображений с бесконечным прокруткой и каменной кладкой jQuery. Я показываю 20 изображений на одной странице. Отображение страницы выглядит так:
../gallery/toprated.php?start=20 (page2) ../gallery/toprated.php?start=40 (page3) и т.п.
Когда я открываю каждую страницу, кликнув по ней, она загружает 20 изображений для каждой страницы.
«Следующий» href для прокрутки прокрутки выглядит так:
<div id="navigation"> <ul class="pager"> <li id="navigation-next"><a href="../gallery/toprated.php?start=20">Next</a></li> </ul>
Код infinty / kason:
<script> (function($){ //set body width for IE8 if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { var ieversion=new Number(RegExp.$1) if (ieversion==8) { $('body').css('max-width', $(window).width()); } } var $masonry = $('#masonry'); $('#navigation').css({'visibility':'hidden', 'height':'1px'}); if ($(document).width() <= 480) { $masonry.imagesLoaded( function(){ $masonry.masonry({ itemSelector : '.thumb', bufferPx : 40, isFitWidth: true }).css('visibility', 'visible'); $('#ajax-loader-masonry').hide(); }); } else { $masonry.masonry({ itemSelector : '.thumb', bufferPx : 40, isFitWidth: true }).css('visibility', 'visible'); $('#ajax-loader-masonry').hide(); } })(jQuery); jQuery(document).ready(function($){ var $masonry = $('#masonry'); $masonry.infinitescroll({ navSelector : '#navigation', nextSelector : '#navigation #navigation-next a', itemSelector : '.thumb', bufferPx : 40, loading: { msgText: '', finishedMsg: 'Alle Bilder geladen', img: '/images/ajax-loader.gif', finished: function() {}, }, }, function(newElements) { var $newElems = $(newElements).css({opacity: 0}); if ($(document).width() <= 480) { $newElems.imagesLoaded(function(){ $('#infscr-loading').fadeOut('normal'); $newElems.animate({opacity: 1}); $masonry.masonry('appended', $newElems, true); }); } else { $('#infscr-loading').fadeOut('normal'); $newElems.animate({opacity: 1}); $masonry.masonry('appended', $newElems, true); } }); $masonry.on('mouseenter', '.thumb-holder', function() { $(this).children('.masonry-actionbar').show(); }); $masonry.on('mouseleave', '.thumb-holder', function() { $(this).children('.masonry-actionbar').hide(); }); }); </script> <script> jQuery(document).ready(function($) { var $scrolltotop = $("#scrolltotop"); $scrolltotop.css('display', 'none'); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $scrolltotop.slideDown('fast'); } else { $scrolltotop.slideUp('fast'); } }); $scrolltotop.click(function () { $('body,html').animate({ scrollTop: 0 }, 'fast'); return false; }); }); }); </script>
У вас есть идея, что происходит? Спасибо за помощь.
Я не уверен, почему у вас есть инструкция if-else, чтобы не включать imagesLoaded в качестве единственной разницы? Попробуйте заменить его следующим:
var $newElems = $(newElements).css({opacity: 0}); $newElems.imagesLoaded(function(){ $('#infscr-loading').fadeOut('normal'); $newElems.animate({opacity: 1}); $masonry.masonry('appended', $newElems, true); });