Форум

dolte · #1 (**permalink**) 11.09.2013, 16:02

в определенной директории имеем файлы:
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 соответственно

danik.js · #2 (**permalink**) 11.09.2013, 17:07

Сообщение от dolte

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; }
            }
        }
    }

Это лишнее. У тебя все равно в IE7 код не будет работать, из-за querySelector. Так что пиши просто new XMLHttpRequest()

А подгружать просто:

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-функцию

dolte · #3 (**permalink**) 11.09.2013, 17:18

Странно, если присутствует строка

request.open('index1.html');

то код не выполняется, пытался менять путь, ничего.

danik.js · #4 (**permalink**) 11.09.2013, 17:44

Поправил код.

dolte · #5 (**permalink**) 12.09.2013, 09:28

А как сделать что-бы он выполнялся поэтапно ?
т.е не все файлы подгружал при прокрутке вниз.

Прокрутили вниз.
*Загрузился первый файл
Прокрутили вниз
*Загрузился второй файл

и т.д

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;
}

dolte · #6 (**permalink**) 12.09.2013, 10:02

Или проще задать конкретную высоту ?
тогда как ?

dolte · #7 (**permalink**) 12.09.2013, 11:23

Разобрался

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;
}

danik.js · #8 (**permalink**) 12.09.2013, 11:51

Хах. И в чем прикол аякс подгрузки и разбивки на файлы если грузится все и сразу?

dolte · #9 (**permalink**) 12.09.2013, 12:19

over много фотографий, я не знал как сделать дргим способом, но грузятся они теперь не все разом, а по кускам

dolte · #10 (**permalink**) 12.09.2013, 13:31

Не понятно как бороться с размером монитора... на больших мониторах значение не срабатывает, и приходится ставить меньше

Форум

Справочник

Discord чат

Курсы javascript