Я давно не писал в блоге и вот сейчас решил продолжить серию современных jquery скриптов которые начинают использовать в рунете.
В чем заключается суть данного скрипта? Я хочу вместо постраничной и ручной загрузки блоков (например с комментариями) сделать автоматическую. А это значит – когда пользователь прокрутит страницу достаточно низко – мы загрузим следующие блоки.
Для этого я планирую создать 2-е страницы
1-я основная с jquery скриптом и первыми 10-ю комментариями
2-я будет подгружать дополнительные блоки.
На 1-й странице я создам 3-и типа блоков
#upBlock – этот блок будет индикатором загрузки и будет выводить картинку "loading” и у этого блока будут такие стили:
#upBlock {
position:fixed;
bottom:15px;
right:15px;
color:#000000;
padding:6px;
text-align:center;
z-index:9999999999;
display:none;
}
#container в нем будут блоки с комментариями этот блок нужен для измерения текущей высоты всех блоков и сравнения с позицией скроулинга.
Теперь нам нужен jquery скрипт который
При прокрутке страницы будет измерять сколько осталось пикселей до конца страницы.
При значении меньше 300px (это значение вы можете изменить как вам удобно) загружать следующие блоки
Передавать 2-й странице номер текущей страницы.
<script>
var thisPageNum = 1;
var thisWork = 1;
function getNextP(){
if(thisWork == 1){
thisWork = 0;
$("#upBlock").css('display','block');
$.get("get.php?page="+thisPageNum, function(data){
$("#upBlock").css('display','none');
$("#LoadDiv").html($("#LoadDiv").html()+" "+data);
thisPageNum = thisPageNum + 1;
thisWork = 1;
});
}
}
$(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 < 300){
getNextP();
}
});
});
</script>
Вот так вот все это выглядит.
Спасибо за внимание)