22 мая 2015 в 19:11
Всем привет.
Такое дело.
Использую masonry для вывода вьюшки сетки.
Второй день пытаюсь прикрутить скрипт для подгрузки контента который попадает в область видимости окна браузера.
пейдежры не подходят, т.к. мне нужно подгрузить не новую страницу, а просто повесить событие.а ниже постраничный пейджер.
Постараюсь немного подробней:
использую animate библиотеку.
для контейнера masonry-item установлен стиль
opacity: 0;
}
подключил скрипт и библиотеку:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
$('.masonry-item').each(function () {
var imagePos = $(this).offset().top;
var bottomOfWindow = $(window).scrollTop() + $(window).height();
if (imagePos <= bottomOfWindow ) {
$(this).addClass("fadeInUp");
}
});
});
он назначает класс fadeInUp для создания анимации с помощью библиотеки animate, но суть не в этом.
тут все хорошо, все работает.
Проблема вот в чем, при загрузке страницы в область видимости попадает n число нод. Т.е. они должны при загрузке страницы уже иметь класс fadeInUp (который и делает анимацию).
в js я не силен, и попробовал использовать код выше долько установть $(document).ready
$('.masonry-item').each(function () {
var imagePos = $(this).offset().top;
var bottomOfWindow = $(window).scrollTop() + $(window).height();
if (imagePos <= bottomOfWindow ) {
$(this).addClass("fadeInUp");
}
});
});
а теперь главная проблема. если зайдете сюда:
dideas.ru
увидите что класс установился только на 1. ноду. а при скроле появляются остальные...
поковырявшись немного, сделал следующее. в этом же скрипте вывел с помощью alert var imagePos, как я понял это положение top контейнера на странице.
тут я понял что по умолчанию вьюха выводит все ноды как unformated list и они идут друг за другом в одну колонку. и получается что вторая нода имеет imagePos +500px(высота контейнера с нодой) и не попадает во вьюпорт.
а вот если поставить opacity: 1 для контейнера, то они все отображаються нормально, но при этом анимация происходит так же криво.
как такое может быть?
Буду признателен за любую помощь в том вопросе.
Комментарии
В Drupal js way для отслеживания нового DOM контента в way используется конструкция типа:
- context принимает новые элементы
- once нужен чтобы не делать повторных действий
...
/**
* Field instance settings screen: force the 'Display on registration form'
* checkbox checked whenever 'Required' is checked.
*/
Drupal.behaviors.fieldUserRegistration = {
attach: function (context, settings) {
var $checkbox = $('form#field-ui-field-edit-form input#edit-instance-settings-user-register-form');
if ($checkbox.length) {
$('input#edit-instance-required', context).once('user-register-form-checkbox', function () {
$(this).bind('change', function (e) {
if ($(this).attr('checked')) {
$checkbox.attr('checked', true);
}
});
});
}
}
};
})(jQuery);
Если библиотека не укладывается в эту религию или нужны дополнительные возможности, посмотрите в сторону использования своих событий выкидывая их через .trigger и отслеживания например через .bind