为啥安卓小娜发送指令后一直在加载，还有为啥之前能用的笔记本现在不停加载？急求

Posted 2023-03-17

参考技术A 存储速度慢 参考技术B 网络问题？ 参考技术C 换一个吧！

为啥加载所有项目后 CSS 加载器一直出现？

【中文标题】为啥加载所有项目后 CSS 加载器一直出现？

【英文标题】：Why does the CSS loader keep appearing after all the items are loaded?为什么加载所有项目后 CSS 加载器一直出现？

【发布时间】：2021-11-30 10:17:13

【问题描述】：

我一直在使用 CodeIgniter 3.1.8 和 Twitter Bootstrap 4 开发在线 newspaper/blogging application。

我目前正致力于通过 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 class="prev">';
        $config['prev_tag_close'] = '</li>';
        $config['next_tag_open'] = '<li class="next">';
        $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);

问题：

加载最后一篇文章后，如果我向上（或上下）滚动，加载器会反复显示和隐藏。

---

我做错了什么？如何修复此错误？

【问题讨论】：

如果这是唯一可以导致加载器显示和隐藏的代码，则显示和隐藏代码行正在执行。这意味着您的 loadMore 正在被调用。那么当发生这种情况时，如果使用 console.log 来显示 if 语句中的值，您会得到什么？

@TimBrownlaw 看看 branch，这将有助于理解问题。根目录下也有 .sql 导出。

您尝试过什么解决问题的方法？这真的和 PHP 和 AJAX 有关吗？

@NicoHaase 我自己发布了一个answer。

【参考方案1】：

我通过使用null 初始化变量posts 并在显示加载程序之前确保posts 不是undefined 解决了这个问题：

(function($) 

    var currentPage = 2,
        maxPage = $('#postsContainer').data('max-page'),
        posts = null;

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

    $(window).scroll(function() 
        var toBottom = $(window).scrollTop() >= $(document).height() - $(window).height() - 25;

        if (toBottom && currentPage <= maxPage) 
            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 (typeof posts != 'undefined') 
                    $('#postsContainer').append(posts);
                    currentPage = currentPage + 1;

                    if (currentPage > maxPage) 
                        $('#postsContainer').append('<p class="text-center text-muted">No more posts to load</p>');
                    
                
            );
    

)(jQuery);

在控制器中：

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();
    $data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);
    $data['max_page'] = ceil($this->Posts_model->get_num_rows() / 12);

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

在视图中：

<div id="postsContainer" data-max-page="max_page">