Как запустить функцию при отображении элемента в окне браузера?
Подскажите, можно ли запустить функцию по событию, когда нужный элемент виден в окне браузера? Нужно посчитать пользователей сайта, которые увидят определенный элемент страницы.
Пока понял что можно постоянно, в цикле мониторить координаты элемента с помощью 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, время: 04:44. |