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');

现在将该id发送到带有ajax的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会在最后一个之后返回项目

为什么infinitescroll一直在加载相同的图像？

1 个答案: