En este tutoriales en linea les mostraremos este pequeño truco en el CMS de Datalife Engine el cual te permite cargar noticias a través del Ajax. 
1 - En su plantilla navigation.tpl
<div class="bottom-nav ignore-select" id="bottom-nav">
<div class="nav-load" id="nav-load">[next-link]Cargar mas...[/next-link]</div>
<!-- aquí puede insertar navegación normal adicional -->
</div>2 - Al final del archivo css de su plantilla
.bottom-nav {clear: both; padding-top: 60px;}
.nav-load {text-align: center;}
.nav-load a {padding: 0 60px; display: inline-block; height: 60px; line-height: 60px; border-radius: 30px;
font-weight: 700; font-size: 18px; background-color: #2980b9; color: #fff;}
.nav-load a:hover {background-color: #00a652; color: #fff;}
.nav-load span {display: none;}3 - Al final del archivo js de su plantilla o antes del cierre del body del main.
$(document).ready(function(){
$('body').on('click','#nav-load a',function(){
var urlNext = $(this).attr('href');
var scrollNext = $(this).offset().top - 200;
if (urlNext !== undefined) {
$.ajax({
url: urlNext,
beforeSend: function() {
ShowLoading('');
},
success: function(data) {
$('#bottom-nav').remove();
$('#dle-content').append($('#dle-content', data).html());
$('#dle-content').after($('#bottom-nav'));
window.history.pushState("", "", urlNext);
$('html, body').animate({scrollTop:scrollNext}, 800);
HideLoading('');
},
error: function() {
HideLoading('');
alert('Algo salió mal - Tutoriales en linea');
}
});
};
return false;
});
});Carga automática al desplazarse o Carga infinita
Como resultado, a medida que se desplaza a las noticias inferiores, las siguientes noticias se descargarán automáticamente.
1 - En su plantilla navigation.tpl
<div class="bottom-nav ignore-select" id="bottom-nav">
<div class="nav-load" id="nav-load">[next-link]Cargar mas..[/next-link]</div>
</div>2 - en su css
.bottom-nav {clear: both; opacity:0;}3 - Al final del archivo js de su plantilla o antes del cierre del body del main.
$(document).ready(function(){
var loadLink = $('#nav-load'), loadStatus = 0;
$(window).scroll (function () {
if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {
var urlNext = loadLink.find('a').attr('href');
if (urlNext !== undefined && loadStatus == 0) {
loadStatus = 1;
$.ajax({
url: urlNext,
beforeSend: function() {
ShowLoading();
},
success: function(data) {
$('#bottom-nav').remove();
$('#dle-content').append($('#dle-content', data).html()).after($('#bottom-nav'));
window.history.pushState("", "", urlNext);
HideLoading();
loadStatus = 0, loadLink = $('#nav-load');
}
});
} else {
loadLink.remove();
};
};
});
}); if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {el número 50 es la distancia hasta la parte inferior de la noticia en la que comienza la descarga. Es decir, puede cargar un poco antes, hasta que el usuario se desplace hasta el final, cambiando esta cifra. Por ejemplo, 250 - news se cargarán antes.
También tenga en cuenta que se recomienda utilizar la descarga solo en el principal y en la categoría para evitar problemas. Normalmente hago esto en navigation.tpl
Comentarios