使用ajax無限滾動我的博客主頁

Question

您好，我有一個寫在php / codeigniter中的博客，在我的主頁（顯示所有帖子）上，我想在帖子上進行無限滾動，以便在到達頁面底部時可以再加載7個。

這是我的控制器：

public function index()
    {
        $data['posts'] = $this->Model_cats->getLivePosts(7);
        $data['cats'] = $this->Model_cats->getTopCategories(); 
        $data['title'] = 'Welcome';
        $data['main'] = 'public_home';
        $this->load->vars($data);
        $this->load->view('template', $data);
    }

    public function index_show_post()
    {
        $data['posts'] = $this->Model_cats->getLivePosts(7);
        $data['cats'] = $this->Model_cats->getTopCategories(); 
        $data['title'] = 'Welcome';
        $data['main'] = 'public_home';
        $data['main2'] = 'public_home_loadpost';
        $this->load->vars($data);
        $this->load->view('template', $data);
    }

我認為showoul的功能index_show_post（）為我加載了7個以上的帖子！ 我不知道這是否是解決方案，但我肯定需要幫助！

這是我的模型：

function getLivePosts($limit)
    {
        $data = array();

        $this->db->limit($limit);
        $this->db->where('status', 'published');
        $this->db->order_by('pubdate', 'desc');
        $query = $this->db->get('posts');

        if($query->num_rows() > 0)
        {
            foreach($query->result_array() as $row)
            {
                $data[] = $row;
            }
        }

        $query->free_result();
        return $data;
    }

該視圖如下所示：

<?php

    if ( count($posts) )
    {
        foreach ($posts as $key => $list)
        {
            echo "<div class='postedComment'>";
            echo '<h2>'.$list['title'].'</h2>';
            echo auto_typography( word_limiter($list['body'], 200) );
            echo anchor('welcome/post/'.$list['id'],'read more >>');
            echo "</div>";
        }
        echo '<br/><br/>';
    }

?>

<div id='loadMoreComments' style="display:none;"></div>

並且我把JavaScript文件..使用ajax我想做到這一點：

$(window).scroll(function()
{
    if( $(window).scrollTop() == $(document).height() - $(window).height() ){
        $('div#loadMoreComments').show();

        $.ajax({
            url: "<?php echo base_url()/welcome/index_show_post?>?lastComment=" + $(".postedComment:last").attr("id"),
            success: function(html){
                if(html)
                {
                    $("#postedComments").append(html);
                    $('div#loadMoreComments').hide();

                }
                else
                {
                    $('div#loadMoreComments').replaceWith("Finished Loading the comments");
                }
            }
        });
    }
});

在這行代碼中：

url: "<?php echo base_url()/welcome/index_show_post?>?lastComment=" + $(".postedComment:last").attr("id"),

我想給控制器打電話，它應該可以工作！ 但事實並非如此！

有什么建議么？

Answer 1

首先，在這里獲取jquery的無限滾動插件： http : //www.infinite-scroll.com/ ，假設您有jquery ...

有很多示例可供參考，因此我將快速講解基本邏輯：

1. 頁面加載沒有帖子！
2. 頁面加載完成，初始化無限滾動
3. Ajax是您的服務器，並獲取帖子並加載它們。
4. 用戶向下滾動，當他跌至最低點或您所配置的內容時，它會加載更多內容。
5. 重復步驟4

比構建自定義對象容易得多，並且可以使DOM受限制。 意味着您僅在DOM中擁有正在顯示的內容。