jQuery ładuje więcej danych na scroll
Zastanawiam się tylko jak Mogę zaimplementować więcej danych na scroll tylko jeśli div.ładowanie jest widoczne.
Zwykle szukamy wysokości strony i wysokości przewijania, aby sprawdzić, czy musimy załadować więcej danych. ale poniższy przykład jest trochę skomplikowany.
Poniższy obraz jest doskonałym przykładem. są dwa .Ładowanie div na rozwijanej skrzynce. Gdy użytkownik przewija zawartość, która jest widoczna, powinien zacząć ładować więcej danych dla to.
Więc jak mogę się dowiedzieć, czy .Ładowanie div jest widoczne dla użytkownika jeszcze czy nie? Więc mogę zacząć ładować dane tylko dla tego div.
9 answers
W jQuery sprawdź, czy trafiłeś na dół strony za pomocą funkcji przewijania. Po naciśnięciu tego, wykonaj połączenie ajax (możesz pokazać ładowanie obrazu tutaj aż ajax odpowiedź) i uzyskać następny zestaw danych, dołączyć go do div. Ta funkcja jest wykonywana podczas ponownego przewijania strony w dół.
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-06 09:32:36
Czy słyszałeś o wtyczka jQuery Waypoint.
Poniżej znajduje się prosty sposób wywołania wtyczki waypointy i załadowania strony większej zawartości, gdy dotrzesz do dołu na przewijaniu:
$(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);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-31 01:37:54
Oto przykład:
- przy przewijaniu do dołu, elementy html są dołączane. Ten mechanizm dodawania jest wykonywany tylko dwa razy, a następnie w końcu dołączany jest przycisk z kolorem powderblue.
<!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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-30 16:06:46
Przyjęta odpowiedź na to pytanie ma pewien problem z chrome, gdy okno jest powiększone do wartości >100%. Oto kod zalecany przez programistów chrome jako część błędu, który poruszyłem na tym samym.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()){
//Your code here
}
});
Dla odniesienia:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-28 11:44:47
Jeśli nie wszystkie zwoje dokumentu, powiedzmy, gdy masz przewijanie div w dokumencie, to powyższe rozwiązania nie będą działać bez adaptacji. Oto jak sprawdzić, czy pasek przewijania div trafił na dół:
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-19 11:49:41
Poprawa @ deepakssn odpowiedz. Istnieje możliwość, że chcesz, aby dane załadować bit przed właściwie przewijamy do dno.
var scrollLoad = true;
$(window).scroll(function(){
if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
// fetch data when we are 800px above the document end
scrollLoad = false;
}
});
[var scrollLoad] jest używany do blokowania wywołania, dopóki nie zostaną dodane nowe dane.
Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-22 12:49:12
Proponuję użyć więcej matematyki.ceil, aby uniknąć błędu na jakimś ekranie.
Ponieważ na kilku różnych ekranach nie jest to absolutnie dokładne
Zdałem sobie z tego sprawę, kiedy pocieszałem.log.
console.log($(window).scrollTop()); //5659.20123123890
I
console.log$(document).height() - $(window).height()); // 5660
Więc myślę, że powinniśmy edytować Twój kod do
$(window).scroll(function() {
if(Math.ceil($(window).scrollTop())
== Math.ceil(($(document).height() - $(window).height()))) {
// ajax call get data from server and append to the div
}
});
Lub Zezwalaj na ładowanie danych z serwera przed przewijaniem do dołu.
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)) {
// Load data
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-07 08:25:10
Spędziłem trochę czasu próbując znaleźć ładną funkcję do owinięcia rozwiązania. W każdym razie skończyło się na tym, co uważam za lepsze rozwiązanie podczas ładowania wielu treści na jednej stronie lub w całej witrynie.
Function:
function ifViewLoadContent(elem, LoadContent)
{
var top_of_element = $(elem).offset().top;
var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
if(!$(elem).hasClass("ImLoaded")) {
$(elem).load(LoadContent).addClass("ImLoaded");
}
}
else {
return false;
}
}
Możesz następnie wywołać funkcję za pomocą window on scroll (na przykład, możesz również powiązać ją z kliknięciem itp. tak jak i ja, stąd Funkcja):
Do użycia:
$(window).scroll(function (event) {
ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html");
ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html");
});
To podejście powinno działać również przy przewijaniu div itp. Mam nadzieję, że to pomoże, w powyższym pytaniu można użyć tego podejścia do załadowania treści w sekcjach, może dołączyć i tym samym dribble feed wszystkie dane obrazu, a nie bulk feed.
Użyłem tego podejścia, aby zmniejszyć koszty na https://www.taxformcalculator.com . umarł sztuczka, jeśli spojrzeć na stronę i sprawdzić element itp. możesz zobaczyć wpływ na ładowanie strony w Chrome(jako przykład).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-02 13:15:54
Twoje pytanie dotyczy wczytywania danych Kiedy div wpadnie do widoku , a nie kiedy użytkownik dotrze do końca strony.
Oto najlepsza odpowiedź na twoje pytanie: https://stackoverflow.com/a/33979503/3024226
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-29 07:30:37