Загрузить содержимое при прокрутке страницы
в определенной директории имеем файлы:
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 много фотографий, я не знал как сделать дргим способом, но грузятся они теперь не все разом, а по кускам
|
Не понятно как бороться с размером монитора... на больших мониторах значение не срабатывает, и приходится ставить меньше
|
dolte,
1 способ внизу страницы кнопа -- скролим страницу - кнопа видна грузим перед ней контент 2 способ внизу страницы кнопа -- скролим страницу - кнопа видна - жмём кнопу - грузим перед ней контент - грузить нечего - убираем кнопу |
Отошел от того к чему шел.
var request1 = new XMLHttpRequest();request1.open('GET', '/complete/moonbeam-suhov/page1.html');
var request2 = new XMLHttpRequest();request2.open('GET', '/complete/moonbeam-suhov/page2.html');
var request3 = new XMLHttpRequest();request3.open('GET', '/complete/moonbeam-suhov/page3.html');
var request4 = new XMLHttpRequest();request4.open('GET', '/complete/moonbeam-suhov/page4.html');
var request5 = new XMLHttpRequest();request5.open('GET', '/complete/moonbeam-suhov/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 element1 = document.querySelector('.ms-showphoto1');
var element2 = document.querySelector('.ms-showphoto2');
var element3 = document.querySelector('.ms-showphoto3');
var element4 = document.querySelector('.ms-showphoto4');
var element5 = document.querySelector('.ms-showphoto5');
var clienth = html.clientHeight;
//var clienthh = document.documentElement.scrollHeight;
//alert(clienthh);
//alert(clienth);
//alert(document.documentElement.scrollTop);
//alert(document.documentElement.scrollHeight);
//alert("Размер вьюпорта: "+ html.clientWidth +"х"+ html.clientHeight);
if (clienth <= 768 )
{
if ($(this).scrollTop() >= clienth + 200 ){element1.innerHTML = request1.responseText;}
if ($(this).scrollTop() >= clienth + 1200){element2.innerHTML = request2.responseText;}
if ($(this).scrollTop() >= clienth + 2200){element3.innerHTML = request3.responseText;}
if ($(this).scrollTop() >= clienth + 3200){element4.innerHTML = request4.responseText;}
if ($(this).scrollTop() >= clienth + 4200){element5.innerHTML = request5.responseText;}
}else{
if ($(this).scrollTop() >= clienth + 100 ){element1.innerHTML = request1.responseText;}
if ($(this).scrollTop() >= clienth + 1200){element2.innerHTML = request2.responseText;}
if ($(this).scrollTop() >= clienth + 2200){element3.innerHTML = request3.responseText;}
if ($(this).scrollTop() >= clienth + 3200){element4.innerHTML = request4.responseText;}
if ($(this).scrollTop() >= clienth + 4200){element5.innerHTML = request5.responseText;}
}
}//Закрыли
вполне работает и на данном этапе устраивает |
Выбросил этот вриант.
Высчитываю положение скролла по другому. Остался вопрос как разделить загрузку, не всё разом, а поэтапно. Прокрутили, подгрузили 1 эллемент Прокрутили, подгрузили 2 эллемент.
var thisPageNum = 1;
var thisWork = 1;
var thisPageNum2 = 2;
var thisWork2 = 2;
function getNextP1(){
if(thisWork == 1 && thisPageNum < 2){thisWork = 0;
$("#upBlock").css('display','block');
$.get("get/get1.php?page="+thisPageNum, function(data){
$("#upBlock").css('display','none');
$("#LoadDiv").html($("#LoadDiv").html()+" "+data);
thisPageNum = thisPageNum + 1;
thisWork = 1;
});
}
}
function getNextP2(){
if(thisWork2 == 2 && thisPageNum2 < 3){thisWork2 = 0;
$("#upBlock").css('display','block');
$.get("get/get2.php?page="+thisPageNum2, function(data){
$("#upBlock").css('display','none');
$("#LoadDiv").html($("#LoadDiv").html()+" "+data);
thisPageNum2 = thisPageNum2 + 1;
thisWork2 = 2;
});
}
}
$(document).ready(function(){
var scrH = $(window).height();
var scrHP = $("#container").height();
$(window).scroll(function(){
var scro = $(this).scrollTop();
var scrHP = $("#container").height();
var scrH2 = 0;
scrH2 = scrH + scro;
var leftH = scrHP - scrH2;
if(leftH < 10){
getNextP1();
getNextP2();
}
});
});
|
| Часовой пояс GMT +3, время: 05:58. |