为什么无限滚动总是加载相同的图像


Why is infinitescroll loading the same images all the time?

我在Laravel中设置了一个应用程序。该应用程序基本上插入了一个instagramapi库,可以获取图像等,并允许分享和点赞以及所有相关内容。

我正在尝试在网站上进行无限滚动,它会将下一页的图像加载到页面中,等等。目前这根本不起作用,只是每次加载相同的图像。我知道它为什么这么做,这是因为url在分页中总是一样的,并且每次添加图像时都不会更新。

这是设置:

JS-

$('#images').infinitescroll({
        navSelector     : "#pagination",
        nextSelector    : "#pagination a",
        itemSelector    : ".instagram-image",
        debug           : true,
        prefill: true,
        dataType: 'html',
        appendCallback: false
        // behavior     : 'twitter',
        // appendCallback   : false, // USE FOR PREPENDING
        //pathParse        : function( pathStr, nextPage ){ return pathStr.replace('2', nextPage ); }
    }, function(newElements, data, url){
        //USE FOR PREPENDING
        // $(newElements).css('background-color','#ffef00');
        $(this).prepend(newElements);
        //
        //END OF PREPENDING
//      window.console && console.log('context: ',this);
      window.console && console.log('returned: ', newElements);
    });

标记-

echo '<section id="images">';
foreach ( $media as $item ) {
    echo '<article class="instagram-image">';
    // define the form and set the action to POST to send the data to this script
    echo '<form id="'. $token .'" class="forms" action="'; echo URL::current(); echo '" method="post">';
        $id = $item->getId();
        echo '<a title="' . $item->getCaption() .'" class="fancybox" rel="folk-1" href="' . $item->images->standard_resolution->url . '"><img alt="' . $item->getCaption() .'" src="' . $item->images->standard_resolution->url . '" /></a>';
        echo '<div class="formSubmit-feedback"></div>';
        if ( $current_user->likes($item) ){
            echo '<button class="ajax instabtn button-unlike unlike icon-heart" type="submit" name="action" value="Unlike"></button>';
        } else {
            echo '<button class="ajax instabtn button-like like icon-heart" type="submit" name="action" value="Like"></button>';
        }
        echo '<input class="id" type="hidden" name="id" value="'; echo $id; echo '">';
        echo '<p>'; echo $item->likes->count; echo '</p>';
    echo '</form>';
    echo '</article>';
}
echo '</section>';

这就是分页标记:

<div id="pagination">
    <?php if( $media->getNext() ) { ?>
        <a class="next_id" href="<?php echo URL::current() ?>?max_id=<?php echo $media->getNextMaxId(); ?>" class="next_page">Next page</a>
    <?php } ?>
</div>

然后在页面中呈现:

<a class="next_id" href="http://folk:8888/?max_id=588378248253423565_195163470">Next page</a>

每次加载项目时,url都不会改变,下一组图像的下一个url基本上是这样的,所以这就是下一页上的内容:

<a class="next_id" href="http://folk:8888/?max_id=556279164512386673_195163470">Next page</a>

因此,获取这一点并不容易,但无限滚动也无法在脚本中确定这一点。

有人知道如何设置或解决方法吗?

任何帮助都将是惊人的,

干杯

如果我了解你,可以这样做:

更改文章布局并将文章id放入id

 echo '<article class="instagram-image" id="$article->id">';

现在在无限滚动中只需获得最后一个instagram图像类id,如下所示:

last_id = $("div.instagram-image:last").attr('id');

现在使用ajax将该id发送到php在你的控制器中做一些类似的事情:

$last_id=0;
if (Input::has('last_id') $last_id = Input::get('last_id')

你的sql是这样的:

$media = Media::where('id','>',$last_id)->take(10);

现在,当向下滚动并调用ajax时,php将返回最后一个之后的项