right - scrolltop javascript
jQuery carga más datos en scroll (3)
Me pregunto cómo puedo implementar más datos en desplazamiento solo si div.loading está visible.
Normalmente buscamos altura de página y altura de desplazamiento, para ver si necesitamos cargar más datos. pero el siguiente ejemplo es poco complicado entonces.
La siguiente imagen es un ejemplo perfecto. hay dos div .loading en el cuadro desplegable. Cuando el usuario desplaza el contenido, lo que esté visible, debería comenzar a cargar más datos para él.
Entonces, ¿cómo puedo saber si .loading div ya no está visible para el usuario? Entonces puedo comenzar a cargar datos solo para ese div.
¿Has oído hablar del plugin jQuery Waypoint ?
A continuación se muestra la manera simple de llamar a un complemento de waypoints y hacer que la página cargue más contenido una vez que llegue al final en el desplazamiento:
$(document).ready(function() {
var $loading = $("<div class=''loading''><p>Loading more items…</p></div>"),
$footer = $(''footer''),
opts = {
offset: ''100%''
};
$footer.waypoint(function(event, direction) {
$footer.waypoint(''remove'');
$(''body'').append($loading);
$.get($(''.more a'').attr(''href''), function(data) {
var $data = $(data);
$(''#container'').append($data.find(''.article''));
$loading.detach();
$(''.more'').replaceWith($data.find(''.more''));
$footer.waypoint(opts);
});
}, opts);
});
Aquí hay un ejemplo:
- Al desplazarse hacia abajo, aparecen los elementos html. Este mecanismo adicional solo se realiza dos veces, y al final se agrega un botón con color azul pálido.
<!DOCTYPE html>
<html>
<head>
<title>Demo: Lazy Loader</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#myScroll {
border: 1px solid #999;
}
p {
border: 1px solid #ccc;
padding: 50px;
text-align: center;
}
.loading {
color: red;
}
.dynamic {
background-color:#ccc;
color:#000;
}
</style>
<script>
var counter=0;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
appendData();
}
});
function appendData() {
var html = '''';
for (i = 0; i < 10; i++) {
html += ''<p class="dynamic">Dynamic Data : This is test data.</br>Next line.</p>'';
}
$(''#myScroll'').append(html);
counter++;
if(counter==2)
$(''#myScroll'').append(''<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button></br></br>'');
}
</script>
</head>
<body>
<div id="myScroll">
<p>
Contents will load here!!!.<br />
</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
<p >This is test data.</br>Next line.</p>
</div>
</body>
</html>
En jQuery, compruebe si ha tocado la parte inferior de la página utilizando la función de desplazamiento. Una vez que golpees eso, haz una llamada ajax (puedes mostrar una imagen de carga aquí hasta la respuesta de ajax) y obtén el siguiente conjunto de datos, añádelo al div. Esta función se ejecuta a medida que se desplaza hacia abajo de la página nuevamente.
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});