jQuery InVpDo Plugin 2.0.3

jQuery-плагин, позволяющий отслеживать появление/исчезновение HTML-элементов в области просмотра окна браузера ( по ум. при скролле и ресайзе).

Пакетные менеджеры:

# Bower
bower install --save invpdo-js

# NPM
npm install --save invpdo-js

Подключение:

1. Подключить jQuery и jquery.invpdo.js:

<!-- jQuery -->
<script src="libs/jquery/dist/jquery.min.js"></script>

<!-- jquery.invpdo.js -->
<script src="dist/jquery.invpdo.js"></script>

3. Инициализировать плагин на элементах, которые необходимо отслеживать и вызвать нужный колбэк:

$('.example').inVpDo({
	onShow: function() {
		// В области просмотра...
	},
	onHide: function() {
		// Вне области просмотра...
	}
});

Параметры:

Опция | Тип | По ум. | Описание ------ | ------ | --------- | --------- threshold | Number | 0 | Кол-во пикселей от/до нижней/верхней границы области и до элемента при достижении котор. сработает соответ. колбэк( beforeShow / afterHide ) once | Boolean | false | true - при появлении элемента в области, сработает только колбэк onShow, единожды. false - при каждом послед. появлении элемента будет срабатывать beforeShow, при каждых последующих исчезновениях - onHide. wait | Number | 75 | Выполнять метод расчета положения элемента не чаще чем один раз в период времени, мс

$('.example').inVpDo({
	threshold: 50,
	once: true,
	wait: 150
});

Функции обратного вызова:

Callback | Аргументы | По ум. | Описание ------ | ---- | ------- | ----------- beforeInit | [instance:object] | n/a | Перед началом инициализации onShow | [instance:object] | n/a | При появлении элемента onHide | [instance:object ] | n/a | При исчезновении элемента

$('.example').inVpDo({
	beforeInit: function(instance) {},
	onShow:     function(instance) {},
	onHide:     function(instance) {}
});

Заметки:

Data-атрибуты:

Параметры в data-атрибуте имеют наивысший приоритет. Они переопределят параметры по умолчанию, а так же пользовательские параметры заданные при инициализации. Значение атрибута - валидный JSON.

	// Инициализация
	$('.example').inVpDo();

	<!-- Переопределение параметров для отдельных эл-ов через Data-атрибут: -->
	<div class="example" data-invpdo='{
		"threshold": 150
	}'></div>
	<div class="example" data-invpdo='{
		"once": true
	}'></div>

Метод расчета положения для отдельного элемента:

	// Инициализация...
	$('.example').inVpDo();
	
	// Вернет true - если эл. на данный момент
	// находится в области просмотра и false - если вне
	$('.example').get(0).InVpDo.check();

Требования

• jQuery версия 1.9.1 или выше

История изменений:

2.0.2 - 16.08.2019

• Полностью переработана структура плагина
• Добавлен учет положения элемента при ресайзе окна
• Расчет положения элемента теперь лежит под debounce-функцией, что позволит исполняться ему не чаще, чем один раз в заданный период времени (новый параметр "wait"). Это должно существенно повысить производительность при использовании плагина одновременно на нескольких элементах

1.0.2 - 18.08.2018

• Добавлена поддержка цепочек вызовов
• Исправлены некоторые ошибки в определении колбэков
• Некоторые правки в readme.md

Поддержка

Решение проблем/багов плагина, а также замечания и пожелания в соответствующей теме

По всем другим вопросам: [email protected]

Лицензия (MIT)

Copyright (c) 2018-2019 Sergey Kravchenko

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.