Приветствую!
На странице есть контент, который разделен на несколько блоков, заключённых в div, имеющих свой class.
После первой загрузки страницы? часть блоков, которые видимы, грузятся Ajax'ом сразу, а остальные блоки, которые находятся за пределами экрана, не должны загружаться.
Остальные блоки должны подгружаться по мере видимости при прокрутке скролла вниз или вверх, в зависимости на каком уровне просмотра перезагрузили страницу или открыли новую страницу, заранее за 50px..
В интернетах ничего хорошего не нашел, только плагины для jQuery, но это не подходит, слишком много для этой задачи.
Хотелось бы небольшой скрипт на javascript, для решения.
Например:
в шаблоне есть div
<div id="guesslike_div"></div>
Применяю такой код:
//Подгружает контент внутри div #guesslike_div, если скроллят страницу и элемент попадает в область видимости
$(document).ready(function(){
$(window).scroll(function() {
//check if your div is visible to user
if ($(window).scrollTop() + $(window).height() >= $('#guesslike_div').offset().top) {
if(!$('#guesslike_div').attr('loaded')) {
//not in ajax.success due to multiple sroll events
$('#guesslike_div').attr('loaded', true);
$('#guesslike_div').load("/get_guesslike.html", function(){
$(this).show();
});
}
}
});
});
Но работает этот код нестабильно.
При первой загрузке, если блок
<div id="guesslike_div"></div>
в области видимости, то скрипт его не подгружает, а погружает только если немного прокрутить скролл.
А так же, если находишься внизу страницы и перезагрузить страницу, то все блоки, которые находятся в верхней части страницы, за пределами видимости, все загружаются, а так быть не должно, они должны быть в отложенной загрузке.
Можете исправить этот скрипт или предложите свой вариант?
Хорошим вариантом был бы один общий скрипт, который можно разместить внизу футера, и в div добавлять активный class, для активации функции отложенной загрузки для этого дива, а для вызов Ajax обернуть в функцию этого скрипта. У каждого div свой Ajax, который вызывает свой файл .html с контентом.
Заранее спасибо, откликнувшимся!