為什么CSS加載器在所有專案加載后一直出現？

我一直在使用CodeIgniter 3.1.8和 Twitter Bootstrap 4 開發在線報紙/博客應用程式。

我目前正在通過 AJAX 加載更多帖子。

默認情況下，帖子分頁并一次顯示12 個，在http://myblog.com/，http://myblog.com/?page=2，等等。

在 Posts 控制器 ( application\controllers\Posts.php) 我有

private function _initPagination($path, $totalRows, $query_string_segment = 'page')
{
    //load and configure pagination 
    $this->load->library('pagination');
    $config['base_url']             = base_url($path);
    $config['query_string_segment'] = $query_string_segment;
    $config['enable_query_strings'] = TRUE;
    $config['reuse_query_string']   = TRUE;
    $config['total_rows']           = $totalRows;
    $config['per_page']             = 12;

    if($this->Static_model->get_static_data()['has_pager']){
        $config['display_pages'] = FALSE;
        $config['first_link'] = FALSE;
        $config['last_link'] = FALSE;
        $config['prev_tag_open'] = '<li >';
        $config['prev_tag_close'] = '</li>';
        $config['next_tag_open'] = '<li >';
        $config['next_tag_close'] = '</li>';
    }

    if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1) {
        $_GET[$config['query_string_segment']] = 1;
    }
    $this->pagination->initialize($config);
    
    $limit  = $config['per_page'];
    $offset = ($this->input->get($config['query_string_segment']) - 1) * $limit;
    
    return array(
        'limit' => $limit,
        'offset' => $offset
    );
}

public function index()
{
    //call initialization method
    $config = $this->_initPagination("/", $this->Posts_model->get_num_rows());
    $data                  = $this->Static_model->get_static_data();
    $data['base_url']      = base_url("/");
    $data['pages']         = $this->Pages_model->get_pages();
    $data['categories']    = $this->Categories_model->get_categories();
    $data['search_errors'] = validation_errors();
    
    //use limit and offset returned by _initPaginator method
    $data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);
    $this->twig->addGlobal('pagination', $this->pagination->create_links());
    
    // featured posts
    if ($data['is_featured']) {
        $data['featured'] = $this->Posts_model->featured_posts();
        $this->twig->addGlobal('featuredPosts', "themes/{$data['theme_directory']}/partials/hero.twig");
    }
    
    $this->twig->display("themes/{$data['theme_directory']}/layout", $data);
} 

為了通過 jQuery Ajax 加載帖子，我有：

(function($) {

    var currentPage = 1;

    $('.pagination').hide();

    $(window).scroll(function() {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            loadMore();
        }
    });

    function loadMore() {
        $.ajax({
                url: baseUrl   '?page='   currentPage,
                type: 'GET',
                beforeSend: function() {
                    $('.loader').show();
                }
            })
            .done(function(data) {
                $('.loader').hide();
                // Get post from page 2 onward
                if (currentPage >= 2) {
                    var posts = $(data).find('#postsContainer').html();
                }
                // If there are no more posts, hide loader
                //  Otherwise, load more posts
                if (posts == 'undefined') {
                    $('.loader').hide();
                } else {
                    $('#postsContainer').append(posts);
                    currentPage = currentPage   1;
                }
            });
    }

})(jQuery);

問題：

加載最后一個帖子后，如果我向上（或向上和向下）滾動，加載器會反復顯示和隱藏。

我究竟做錯了什么？我該如何修復這個錯誤？

uj5u.com熱心網友回復：

我通過初始化變數解決了這個問題posts用null，并確保posts沒有undefined顯示加載器之前：

(function($) {

    var currentPage = 2;
    var posts = null;

    $('.pagination').hide();

    $(window).scroll(function() {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 25) {
            loadMore();
        }
    });

    function loadMore() {
        $.ajax({
                url: baseUrl   '?page='   currentPage,
                type: 'GET',
                beforeSend: function() {
                    if (typeof posts != 'undefined') {
                        $('.loader').show();
                    }
                }
            })
            .done(function(data) {
                $('.loader').hide();

                posts = $(data).find('#postsContainer').html();

                // If there are no more posts, hide loader
                //  Otherwise, load more posts
                if (typeof posts == 'undefined') {
                    $('.loader').hide();
                } else {
                    $('#postsContainer').append(posts);
                    currentPage = currentPage   1;
                }
            });
    }

})(jQuery);

標籤：javascript php 查询 阿贾克斯 代码点火器

上一篇：如何在wordpress中驗證用戶？

下一篇：React：無法通過API獲取資料