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

Question

我在 Laravel 中设置了一个应用程序。该应用程序基本上插入了一个 instagram api 库并获取图像等，并允许分享和喜欢以及与之相关的一切。

我正在尝试在网站上进行无限滚动，它将下一页图像加载到页面中，依此类推。目前这根本不起作用，它每次都加载相同的图像。我知道它为什么这样做，这是因为分页中的 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>

所以得到这个不是那么容易，而且无限滚动无法在脚本中确定这一点。

有没有人知道如何设置或解决它？

对此的任何帮助都会令人惊叹，

干杯

Answer 1

如果我理解你，请这样做：

更改您的文章布局并将文章 ID 放入 id

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

现在在无限滚动中，只需像这样获取最后一个 instagram-image 类 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 将返回最后一个之后的项目