Некорректный переход к якорю у одностраничника c lazyload картинками. Как решить?

Суть: При клике по пункту меню браузер недоходит до якоря. Неверно считает высоту элементов.
Детали: В связке по тригерам на одностраничнике работают:
1. LazyLoad.js (www.appelsiini.net)
2. Isotope.js (isotope.metafizzy.co)
3. PanoramaViewer.js (github.com/peachananr/panorama_viewer)
4. OnePageNav.js (github.com/davist11/jQuery-One-Page-Nav)

Если сначала проскролить страницу сверху вниз, тем самым загрузить всё что lazy и сформировать плитку masorny - якоря навигации работают корректно.

Если не скролить всю страницу от начала до конца, а сразу кликнуть по самому последнему пункту меню. Переход происходит не к якорю, а на "расстояние в полпути до него". Как пересчитывать window.height ?

Что пытался сделать:
У onePageNav.js есть событие begin - перед началом перехода к якорю. Прописал в это событие функцию с тригером на загрузку всего, что lazy.
$('header .nav').onePageNav({
	 begin: function() {
		 	$imgs.trigger('lazy');
	 },
});

При клике событие отрабатывает и грузится всё lazy, но всё равно переход к якорю на "расстояние в полпути до него".

Функции, которыми подгружаю картинки:
// Изображения подгружаются  по мере попадания во viewport:
function loadVisible($els, trigger) {
        $els.filter(function () {
            var rect = this.getBoundingClientRect();
            return rect.top >= 0 && rect.top <= window.innerHeight;
        }).trigger(trigger);
}
// Lazy для картинок
$imgs.lazyload({
	effect: "fadeIn",
	failure_limit:  Math.max($laziOne.length - 1, 0),
	load: loadIsotop,
	event: 'lazy'
});
//Инициализация Isotope
function loadIsotop() {
	$container.isotope({
	itemSelector: '.item-banquet',
	transitionDuration: '0.4s',
	});
}
//Пересчёт лайаута
$container.isotope('on', 'layoutComplete', function (){
        loadVisible($imgs, 'lazy');
});
//Загрузка lazy при скроле
$win.on('scroll', function () {
	loadVisible($imgs, 'lazy');
});


Как добавлять height секций с lazy элементами до перехода к якорю? Прошу помощи.
  • Вопрос задан
  • 761 просмотр
Решения вопроса 1
trushka
@trushka
Можно сделать, как советовал Максим.у в комментарии, а можно, используя ваши наработки
function lazyScroll () {
  loadVisible($imgs, 'lazy');
}
$win.on('scroll', lazyScroll );

$('header .nav').onePageNav({
   begin: function() {
     	$win.off('scroll', lazyScroll );
   }, end: function() {
     	$win.on('scroll', lazyScroll );
   }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@pudovMaxim
web-developer
Тоже есть подобная беда. Думал об отключении на время загрузки, скролла до нужного места и снова включать. Пока не придумал как лучше сделать.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы