Загрузить содержимое при прокрутке страницы
в определенной директории имеем файлы:
index1.html index2.html index3.html index4.html ... Нижнее положение скролла отлавливаю так:
window.onscroll = function ()
{
var B = document.body,
DE = document.documentElement,
O = Math.min (B.clientHeight, DE.clientHeight); if (!O) O = B.clientHeight;
var S = Math.max (B.scrollTop, DE.scrollTop),
C = Math.max (B.scrollHeight, DE.scrollHeight);
if (O + S == C)
alert ('Работаем');
}
Как при крайнем нижнем положении подгрузить index1.html далее index2.html и т.д В итоге, орудую таким кодом:
<!doctype html>
<html>
<head>
<script>
window.onscroll = function ()
{
var B = document.body,
DE = document.documentElement,
O = Math.min (B.clientHeight, DE.clientHeight); if (!O) O = B.clientHeight;
var S = Math.max (B.scrollTop, DE.scrollTop),
C = Math.max (B.scrollHeight, DE.scrollHeight);
var element = document.querySelector('.contentBody');
var element2 = document.querySelector('.contentBody2');
if (O + S == C)
element2.innerHTML = 'Добавили второй эллемент<br/><br/><br/><br/><br/><br/><br/><br/><br/>';
element.innerHTML = 'Добавили<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>';
}
function createRequestObject() {
try { return new XMLHttpRequest() }
catch(e) {
try { return new ActiveXObject('Msxml2.XMLHTTP') }
catch(e) {
try { return new ActiveXObject('Microsoft.XMLHTTP') }
catch(e) { return null; }
}
}
}
</script>
</head>
<body style="height:650px;">
<br/><br/><br/><br/><br/><br/>
<div class="contentBody"></div>
<div class="contentBody2"></div>
</body>
<html>
Как вместо element2.innerHTML = 'Добавили второй эллемент<br/><br/><br/><br/><br/><br/><br/><br/><br/>'; element.innerHTML = 'Добавили<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'; Подгружать содержимое из index1.html и index2.html соответственно |
Цитата:
А подгружать просто:
var request = new XMLHttpRequest();
request.open('GET', 'index1.html');
request.onreadystatechange = function() {
if (request.readystate == 4) {
if (request.status == 200) {
element.innerHTML = request.responseText;
}
}
};
request.send(null)
Удобней обернуть все это в функцию, передавая аргументами url и callback-функцию |
Странно, если присутствует строка
request.open('index1.html');
то код не выполняется, пытался менять путь, ничего. |
Поправил код.
|
А как сделать что-бы он выполнялся поэтапно ?
т.е не все файлы подгружал при прокрутке вниз. Прокрутили вниз. *Загрузился первый файл Прокрутили вниз *Загрузился второй файл и т.д
var request1 = new XMLHttpRequest();
request1.open('GET', 'page1.html');
var request2 = new XMLHttpRequest();
request2.open('GET', 'page2.html');
var request3 = new XMLHttpRequest();
request3.open('GET', 'page3.html');
var request4 = new XMLHttpRequest();
request4.open('GET', 'page4.html');
var request5 = new XMLHttpRequest();
request5.open('GET', 'page5.html');
request1.send(null)
request2.send(null)
request3.send(null)
request4.send(null)
request5.send(null)
window.onscroll = function ()
{
var B = document.body,
DE = document.documentElement,
O = Math.min (B.clientHeight, DE.clientHeight); if (!O) O = B.clientHeight;
var S = Math.max (B.scrollTop, DE.scrollTop),
C = Math.max (B.scrollHeight, DE.scrollHeight);
var element1 = document.querySelector('.contentBody1');
var element2 = document.querySelector('.contentBody2');
var element3 = document.querySelector('.contentBody3');
var element4 = document.querySelector('.contentBody4');
var element5 = document.querySelector('.contentBody5');
if (O + S == C)
element5.innerHTML = request5.responseText;
element4.innerHTML = request4.responseText;
element3.innerHTML = request3.responseText;
element2.innerHTML = request2.responseText;
element1.innerHTML = request1.responseText;
}
|
Или проще задать конкретную высоту ?
тогда как ? |
Разобрался
var request1 = new XMLHttpRequest();
request1.open('GET', 'page1.html');
var request2 = new XMLHttpRequest();
request2.open('GET', 'page2.html');
var request3 = new XMLHttpRequest();
request3.open('GET', 'page3.html');
var request4 = new XMLHttpRequest();
request4.open('GET', 'page4.html');
var request5 = new XMLHttpRequest();
request5.open('GET', 'page5.html');
request1.send(null)
request2.send(null)
request3.send(null)
request4.send(null)
request5.send(null)
var html = document.documentElement;
window.onscroll = function ()
{
var B = document.body,
DE = document.documentElement,
O = Math.min (B.clientHeight, DE.clientHeight); if (!O) O = B.clientHeight;
var S = Math.max (B.scrollTop, DE.scrollTop),
C = Math.max (B.scrollHeight, DE.scrollHeight);
var element1 = document.querySelector('.contentBody1');
var element2 = document.querySelector('.contentBody2');
var element3 = document.querySelector('.contentBody3');
var element4 = document.querySelector('.contentBody4');
var element5 = document.querySelector('.contentBody5');
if ($(this).scrollTop() >= 650)
{
element1.innerHTML = request1.responseText;
}
if ($(this).scrollTop() >= 2500)
{
element2.innerHTML = request2.responseText;
}
//element5.innerHTML = request5.responseText;
//element4.innerHTML = request4.responseText;
//element3.innerHTML = request3.responseText;
//element2.innerHTML = request2.responseText;
//element1.innerHTML = request1.responseText;
}
|
Хах. И в чем прикол аякс подгрузки и разбивки на файлы если грузится все и сразу?
|
over много фотографий, я не знал как сделать дргим способом, но грузятся они теперь не все разом, а по кускам
|
Не понятно как бороться с размером монитора... на больших мониторах значение не срабатывает, и приходится ставить меньше
|
| Часовой пояс GMT +3, время: 18:46. |