Запустили проект с использованием изотопа jQuery. Первоначально интегрированный с бесконечным свитком, но думал, что он был немного неуклюжим.
Я надеялся заменить Infinite Scroll на Lazy Load, и подумал, что кому-то удавалось комбинировать эти два. Любые советы, чтобы заставить их играть хорошо, было бы здорово.
Спасибо мельнице
Если вы хотите использовать функции сортировки/фильтрации изотопов, вам нужно будет установить fail_limit lazyload и вызвать событие с помощью обратного вызова isotope onLayout.
jQuery(document).ready(function($) {
var $win = $(window),
$con = $('#container'),
$imgs = $("img.lazy");
$con.isotope({
onLayout: function() {
$win.trigger("scroll");
}
});
$imgs.lazyload({
failure_limit: Math.max($imgs.length - 1, 0)
});
Согласно документам (http://www.appelsiini.net/projects/lazyload)
После прокрутки страницы Lazy Load зацикливает, хотя выгруженные изображения. В цикле он проверяет, стало ли изображение видимым. По умолчанию цикл останавливается, когда найдено первое изображение под сгибом (не видно). Это основано на следующем предположении. Порядок изображений на странице такой же, как и порядок изображений в HTML-коде. С некоторыми предположениями о макетах это может быть неправильно.
С списком отсортированных/отфильтрованных изотопов порядок страниц, безусловно, отличается от HTML, поэтому нам нужно настроить наш fail_limit.
Как вы можете видеть, мы храним объект jQuery, чтобы мы могли использовать его длину-1 как наш fail_limit. Если вам интересно, почему это длина-1, это из-за следующей проверки в методе обновления lazyload.
if (++counter > settings.failure_limit) {
return false;
}
Если вы не запускаете свои lazyloads на прокрутке, вам нужно будет поменять триггер "прокрутки" для того, что вы используете.
Я думаю, вам, возможно, удастся использовать это вместо этого: https://github.com/fasterize/lazyload
Это независимая библиотека, поэтому она не сломается.
Здесь рабочий код с использованием изолятора jquery и lazyload вместе успешно (протестирован в Chrome)
В консоли браузера вы получите подтверждение console.log( "загруженное изображение" ) при загрузке изображения при прокрутке вниз. Перетащите окно jsfiddle html, чтобы изменить ширину, и вы увидите динамическое изменение макета.
Я добавил красный класс фона, чтобы вы могли видеть, как изотоп изменяет dom после его загрузки. Большинство проблем при попытке установить это происходит от IMHO, манипуляции с изотопом dom.
Надеюсь, этого достаточно, чтобы вы начали. Получайте удовольствие.
Update: Я никогда не тестировал пример в других браузерах, и, по-видимому, IE или FF не работали из-за ссылок HTTPS для ресурсов javascript (по какой-то нечетной причине безопасности). Замена их была всем, что было необходимо для работы в IE и FF, как показано здесь:
http://jsbin.com/ajoded/ а также http://jsfiddle.net/wN6tC/73/