jQuery InVpDo Plugin 2.0.3
jQuery-плагин, позволяющий отслеживать появление/исчезновение
HTML-элементов в области просмотра окна браузера ( по ум. при скролле и ресайзе).
Пакетные менеджеры:
# Bower
bower install --save invpdo-js
# NPM
npm install --save invpdo-js
Подключение:
- Подключить jQuery и jquery.invpdo.js:
<!-- jQuery -->
<script src="libs/jquery/dist/jquery.min.js"></script>
<!-- jquery.invpdo.js -->
<script src="dist/jquery.invpdo.js"></script>
- Инициализировать плагин на элементах, которые необходимо отслеживать и вызвать нужный колбэк:
$('.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
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.