Как запустить функцию при отображении элемента в окне браузера?
Подскажите, можно ли запустить функцию по событию, когда нужный элемент виден в окне браузера? Нужно посчитать пользователей сайта, которые увидят определенный элемент страницы.
Пока понял что можно постоянно, в цикле мониторить координаты элемента с помощью getBoundingClientRect() и сравнивать их с размерами окна, но этот вариант мне кажется не самым лучшим. |
Зачем же постоянно? Только на onscroll.
|
и на onresize еще
|
Спасибо! Как-то про onscroll и не подумал, onresize в моем случае можно не учитывать, слишком мала вероятность что это событие повлияет на видимость нужного элемента страницы.
|
Цитата:
Скрипт определяет при каждом (на самом деле не при каждом) "скролле" экрана элементы, находящиеся в зоне видимости пользователя. Осторожно jQuery:
var timer = 0,
//"самописный" селектор выбирает все элементы на экране, между "верхом" и "низом"
//(горизонтаьная прокрутка не учитывается, но можно дописать по-аналогии)
(function(){
$.belowthefold = function(element) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top;
};
$.abovethetop = function(element) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height();
};
$.inviewport = function(element) {
return !$.belowthefold(element) && !$.abovethetop(element);
};
$.extend($.expr[':'], {
"inViewport": function(a){return $.inviewport(a);}
});
})(),
handler = function(){
var inViewportList = $('div:inViewport'); //набор элементов, видимых в окне браузера
//делайте с ними что хотите
//ваш код
};
handler();
//вызывает "handler" с задержкой (500 мс) после "каждого скролла"
//если успел прокрутить дальше, то обрабатывается только "второй скролл" и т.д.
//очень удобно - меньше вычислений - меньше нагрузка на браузер
$(window).scroll(function(){
if(timer){
clearTimeout(timer);
timer = 0;
}
timer = setTimeout(handler, 500);
});
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:52. |