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

Question

[Сергей Третьяков]

Суть: При клике по пункту меню браузер недоходит до якоря. Неверно считает высоту элементов.
Детали: В связке по тригерам на одностраничнике работают:
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 элементами до перехода к якорю? Прошу помощи.

Answer 1

[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 );
   }
});

Comments

[Сергей Третьяков]

Спасибо Большое! Респект и Уважуха.

Answer 2

[Максим]

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

Comments

[trushka]

Проще всего - допилить сам LazyLoad.js - скачать несжатый файл и в начало функции update добавитьif (window.preventLazyLoad) return;И перед прокруткой к нужному месту устанавливать preventLazyLoad=true, а потом? по окончанию прокрутки обратно в false. так же можно сделать более продвинуто и универсально - if (settings.check && !settings.check()) return; - тогда можно будет задать в качестве параметра settings при инициализации плагина функцию, которая будет в зависимости от каких-то условий возвращать false и тогда LazyLoad не сработает