为什么 CSS 加载程序在加载所有项目后一直出现?
Why does the CSS loader keep appearing after all the items are loaded?
我一直在使用 newspaper/blogging application 使用 CodeIgniter 3.1.8 和 Twitter Bootstrap 4 .
我目前正在通过 AJAX.
加载更多 posts
默认情况下,post分页显示一次12,在http://myblog.com/
,http://myblog.com/?page=2
,依此类推.
在帖子控制器中 (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 加载 posts,我有:
(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);
问题:
加载最后一个 post 后,如果我向上(或向上和向下)滚动,加载程序会重复显示和隐藏。
我做错了什么?我该如何修复这个错误?
我通过用 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}}">
我一直在使用 newspaper/blogging application 使用 CodeIgniter 3.1.8 和 Twitter Bootstrap 4 .
我目前正在通过 AJAX.
加载更多 posts默认情况下,post分页显示一次12,在http://myblog.com/
,http://myblog.com/?page=2
,依此类推.
在帖子控制器中 (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 加载 posts,我有:
(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);
问题:
加载最后一个 post 后,如果我向上(或向上和向下)滚动,加载程序会重复显示和隐藏。
我做错了什么?我该如何修复这个错误?
我通过用 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}}">