jQuery infinite scroll / images load twice

I have a image gallery with jQuery infinite scroll and masonry. I display 20 images on one page. The pagination looks like:

../gallery/toprated.php?start=20 (page2)
../gallery/toprated.php?start=40 (page3)

etc.

When I open each page by click on the pagination it loads the 20 images for every page.

The "next" href for the infity scroll looks like:

<div id="navigation">
    <ul class="pager">
        <li id="navigation-next"><a href="../gallery/toprated.php?start=20">Next</a></li>

    </ul>

The infinty / masonry code:

<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>

Do you have a Idea whats going on? Thank you for help.

I'm not sure why you have the if-else statement to not include imagesLoaded as the only difference? Try replacing it with this:

        var $newElems = $(newElements).css({opacity: 0});                      
        $newElems.imagesLoaded(function(){
        $('#infscr-loading').fadeOut('normal');
        $newElems.animate({opacity: 1});
        $masonry.masonry('appended', $newElems, true);
        });