Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.08.2010, 11:40
Новичок на форуме
Отправить личное сообщение для Kostushko Посмотреть профиль Найти все сообщения от Kostushko
 
Регистрация: 25.08.2010
Сообщений: 6

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

Пока понял что можно постоянно, в цикле мониторить координаты элемента с помощью getBoundingClientRect() и сравнивать их с размерами окна, но этот вариант мне кажется не самым лучшим.
Ответить с цитированием
  #2 (permalink)  
Старый 25.08.2010, 12:27
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Зачем же постоянно? Только на onscroll.
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2010, 12:29
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

и на onresize еще
Ответить с цитированием
  #4 (permalink)  
Старый 25.08.2010, 13:00
Новичок на форуме
Отправить личное сообщение для Kostushko Посмотреть профиль Найти все сообщения от Kostushko
 
Регистрация: 25.08.2010
Сообщений: 6

Спасибо! Как-то про onscroll и не подумал, onresize в моем случае можно не учитывать, слишком мала вероятность что это событие повлияет на видимость нужного элемента страницы.
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2010, 17:58
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

Сообщение от Kostushko Посмотреть сообщение
Подскажите, можно ли запустить функцию по событию, когда нужный элемент виден в окне браузера?
Может быть немного не в тему, но всё же.
Скрипт определяет при каждом (на самом деле не при каждом) "скролле" экрана элементы, находящиеся в зоне видимости пользователя.
Осторожно 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);
});
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2010, 19:34
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Jurasmi
//вызывает "handler" с задержкой (500 мс) после "каждого скролла"
//если успел прокрутить дальше, то обрабатывается только "второй скролл" и т.д.
//очень удобно - меньше вычислений - меньше нагрузка на браузер
http://alljs.ru/articles/timeout/patterns.html#debounce
Ответить с цитированием
  #7 (permalink)  
Старый 27.09.2010, 11:03
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

Сообщение от Kolyaj Посмотреть сообщение
http://alljs.ru/articles/timeout/patterns.html#debounce
очень хорошая ссылка, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как разделять страницы при выводе отчета ilshat Events/DOM/Window 7 10.12.2009 10:24
js файл(незнаю как запустить функцию) Temchik Opera, Safari и др. 6 20.07.2009 11:49
Как можно найти разрешение рабочей области браузера? Влад Общие вопросы Javascript 3 20.07.2009 10:18
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
Фиксация элемента внизу окна браузера Макс Events/DOM/Window 1 25.08.2008 13:46