いつもお世話になっております。
「masonry」 + 「infinite-scroll」 + 「imagesloaded」で、タイル形式の無限スクロールさせていますが、iPhoneのsafariで、タイル内のリンクに遷移後、ブラウザバックした時に元にいた場所に戻ったり戻らなかったり動作が安定しません。元にいた場所に戻る時が正のですが、このように動作が不安定となってしまう事について、何か原因など考えられる事はございますでしょうか。
以下にcodeを記載いたします。
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/3.0.6/infinite-scroll.pkgd.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.min.js"></script> <script> $(window).unload(function() {$.cookie('scrollTop',$(window).scrollTop());}); $(window).load(function(){ // Masonry grid var and options var $container = jQuery('.centered').masonry({ itemSelector: '.col2', isAnimated: true, isFitWidth: true, transitionDuration: 0, isRTL: false, isResizable: true }); // get Masonry instance var msnry = $container.data('masonry'); // Infinite Scroll options $container.infiniteScroll({ path: '.pagenation .next a', append: '.col2', outlayer: msnry, status: '.page-load-status', scrollThreshold: 600, loadOnScroll: true, hideNav: '.pagenation', debug: true, history: 'push', //safari work around - this was one of the attempts but it didnt work on its own so I decided to // leave it here just in case might help someone. onInit: function () { this.on( 'append', function( event, response, path, items ) { $container.imagesLoaded().done( function() { $container.masonry(); }); }); } }); $container.on( 'append.infiniteScroll', function( event, response, path, items ) { $( items ).find('img[srcset]').each( function( i, img ) { img.outerHTML = img.outerHTML; }); }); // initial items reveal $container.imagesLoaded( function() { $container.removeClass('are-images-unloaded'); $container.masonry('layout'); }); }); </script>
もしかするとサーバーの負荷が高い時に挙動がおかしくなっているのかもしれませんが、
何か分かる事がありましたら、お教えください。
あなたの回答
tips
プレビュー