Skip to content
jQuery InVpDo - плагин, позволяющий отслеживать появление/исчезновение HTML-элементов в области просмотра окна браузера ( по ум. при скролле и ресайзе).
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
.bowerrc
.gitignore
README.md
bower.json
gulpfile.js
package.json

README.md

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>
  1. Инициализировать плагин на элементах, которые необходимо отслеживать и вызвать нужный колбэк:
$('.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

Поддержка

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

По всем другим вопросам: wahawaher@gmail.com

Лицензия (MIT)

Copyright (c) 2018-2019 Sergey Kravchenko

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

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

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

You can’t perform that action at this time.