Geek asks and answers

JQuery Infinite Scrolling Not Triggering

I'm building a simple little website to apply a different formatting style to Reddit posts, I'm trying to add a jQuery plugin with infinite scroll, but it does nothing. I tried to follow the (very simple) instructions on the infinite scroll page, and when he didn’t do anything, I thought that I must have entered something wrong, but then I just copied / pasted the code from Masonry / Infinite-Scroll Example , and it still does not work. Freemasonry works perfectly (finally), but I just can't figure out what's wrong with infinite scrolling. I understand the basics of jQuery and JavaScript, but obviously not as much as most of you, so could you help me and tell me what's wrong? My site is located at reddit.ymindustries.com .

Thanks a bunch, you guys have rarely let me down so far.

Ym

UPDATE: If there are not enough images to fill the page on the main page, visit reddit.ymindustries.com/r/aww for more images.

UPDATE 2: I believe I found the problem, it is described here: https://github.com/paulirish/infinite-scroll/issues/5 Now, to find a solution ...

UPDATE 3: Added a little hack to make it seem to work, but now it seems that the second page is looping endlessly. Hm ...

+6
source share
4 answers

, - css. , . $

, $ , ,

BTW, , , , , , .

=== UPDATE ===

, infinitescroll, script, pathParse script

$(function () {

        var $container = $('#itemContainer');

        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector:'.item'
            });
        });
        $container.infinitescroll({
                    navSelector:'.navigation', // selector for the paged navigation
                    nextSelector:'.navigation #next', // selector for the NEXT link (to page 2)
                    itemSelector:'.item', // selector for all items you'll retrieve
                    bufferPx:40,
                    debug:true,
                    columnWidth:function (containerWidth) {
                        return containerWidth / 5;
                    },
                    loading:{
                        finishedMsg:'No more pages to load.',
                        img:'http://i.imgur.com/6RMhx.gif'
                    },
                    pathParse: function(path,page){
                        return $(this.nextSelector).attr("href");
                    }
                },
                // trigger Masonry as a callback
                function (newElements) {
                    // hide new items while they are loading
                    var $newElems = $(newElements).css({ opacity:0 });
                    // ensure that images load before adding to masonry layout
                    $newElems.imagesLoaded(function () {
                        // show elems now they're ready
                        $newElems.animate({ opacity:1 });
                        $container.masonry('appended', $newElems, true);
                    });
                    //console.log("test (never fired :( )");
                }
        );

    });

, (http://reddit.ymindustries.com/?after=t3_yh4av), , ajax ... -

function (newElements) {
                        // hide new items while they are loading
                        var $newElems = $(newElements).css({ opacity:0 });
                        // ensure that images load before adding to masonry layout

                        // ======> if query parameter after=... is caring filename then do this
                        var lastImageUrl= $newElements[$newElements.length-1].attr("src");
                        var lastFileName= lastImageUrl.substring(lastImageUrl.lastIndexOf("/") +1, lastImageUrl.lastIndexOf("."));
                        $("#next").attr("href", "http://reddit.ymindustries.com/?after="+lastFileName);

                        $newElems.imagesLoaded(function () {
                            // show elems now they're ready
                            $newElems.animate({ opacity:1 });
                            $container.masonry('appended', $newElems, true);
                        });
                        //console.log("test (never fired :( )");
                    }
0

, , , , / ( 2.0b2.110713), , :

//old code, to be changed (line 489)
desturl = path.join(opts.state.currPage);
// new code
desturl = (typeof path === 'function') ? path(opts.state.currPage) : path.join(opts.state.currPage);

0

jQuery "infinitescroll" . , , .

WordPress "". WordPress 10 . 100/, , . , , , , .

, . , , , , .

If you think that someone can get to your site with a really huge display, I’m not sure that the answer is different than showing more elements / page, and maybe add $('#masonry').infinitescroll('retrieve');to the footer to load an additional page into the case.

0
source

More articles:


All Articles