Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как запустить функцию при отображении элемента в окне браузера? (https://javascript.ru/forum/events/11468-kak-zapustit-funkciyu-pri-otobrazhenii-ehlementa-v-okne-brauzera.html)

Kostushko 25.08.2010 10:40

Как запустить функцию при отображении элемента в окне браузера?
 
Подскажите, можно ли запустить функцию по событию, когда нужный элемент виден в окне браузера? Нужно посчитать пользователей сайта, которые увидят определенный элемент страницы.

Пока понял что можно постоянно, в цикле мониторить координаты элемента с помощью getBoundingClientRect() и сравнивать их с размерами окна, но этот вариант мне кажется не самым лучшим.

Kolyaj 25.08.2010 11:27

Зачем же постоянно? Только на onscroll.

Gvozd 25.08.2010 11:29

и на onresize еще

Kostushko 25.08.2010 12:00

Спасибо! Как-то про onscroll и не подумал, onresize в моем случае можно не учитывать, слишком мала вероятность что это событие повлияет на видимость нужного элемента страницы.

Jurasmi 24.09.2010 16:58

Цитата:

Сообщение от Kostushko (Сообщение 68579)
Подскажите, можно ли запустить функцию по событию, когда нужный элемент виден в окне браузера?

Может быть немного не в тему, но всё же.
Скрипт определяет при каждом (на самом деле не при каждом) "скролле" экрана элементы, находящиеся в зоне видимости пользователя.
Осторожно 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);
});

Kolyaj 24.09.2010 18:34

Цитата:

Сообщение от Jurasmi
//вызывает "handler" с задержкой (500 мс) после "каждого скролла"
//если успел прокрутить дальше, то обрабатывается только "второй скролл" и т.д.
//очень удобно - меньше вычислений - меньше нагрузка на браузер

http://alljs.ru/articles/timeout/patterns.html#debounce

Jurasmi 27.09.2010 10:03

Цитата:

Сообщение от Kolyaj (Сообщение 71855)

очень хорошая ссылка, спасибо!


Часовой пояс GMT +3, время: 11:24.