Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.09.2013, 16:02
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

Загрузить содержимое при прокрутке страницы
в определенной директории имеем файлы:
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 соответственно
Ответить с цитированием
  #2 (permalink)  
Старый 11.09.2013, 17:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от 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-функцию
__________________
В личку только с интересными предложениями

Последний раз редактировалось danik.js, 11.09.2013 в 17:44.
Ответить с цитированием
  #3 (permalink)  
Старый 11.09.2013, 17:18
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

Странно, если присутствует строка
request.open('index1.html');


то код не выполняется, пытался менять путь, ничего.
Ответить с цитированием
  #4 (permalink)  
Старый 11.09.2013, 17:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Поправил код.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 12.09.2013, 09:28
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

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

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

и т.д

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;
}
Ответить с цитированием
  #6 (permalink)  
Старый 12.09.2013, 10:02
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

Или проще задать конкретную высоту ?
тогда как ?
Ответить с цитированием
  #7 (permalink)  
Старый 12.09.2013, 11:23
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

Разобрался

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;
}
Ответить с цитированием
  #8 (permalink)  
Старый 12.09.2013, 11:51
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Хах. И в чем прикол аякс подгрузки и разбивки на файлы если грузится все и сразу?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 12.09.2013, 12:19
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

over много фотографий, я не знал как сделать дргим способом, но грузятся они теперь не все разом, а по кускам
Ответить с цитированием
  #10 (permalink)  
Старый 12.09.2013, 13:31
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как загрузить в переменную содержимое блока другой страницы? Hasanaga999 jQuery 3 25.04.2013 23:27
Как сделать чтобы элемент появлялся при скроле страницы, у определенного класса. SnakeAce Общие вопросы Javascript 1 30.01.2013 14:32
Прижимание блока при прокрутке страницы byFahrenheit Общие вопросы Javascript 2 14.01.2013 14:03
Фиксация объекта при скрулинге страницы Pashok(one) Общие вопросы Javascript 10 08.01.2013 02:52
Как задать изменение src при прокрутке chandler Элементы интерфейса 3 12.01.2012 01:23