Почему первый раз не вычисляется height JS?

Question

[skdon]

Есть слайдер. Пример странички tommy.1gb.ru/leather
Подскажите, пожалуйста, почему при уменьшении ширины экрана, не высчивается с первого раза высота расположения стрелочек. Т.е. стрелки листания при загрузке страницы расположены выше, чем должны. Если немного ресайзить окно, то они становятся на место. Выполняется кусок

jQuery(window).on("resize", function(event) {
                    methods.setResponsiveEvents();
                    var innerWidth = jQuery(listParent).width();
                    var innerHeight = jQuery(listParent).height();

Все просчитывается и становится на свои места.
Подскажите, почему при большой ширине окна все нормально, а при маленькой такая бяка...
При инициализации, вижу вызывается onresize

Public Methods
        *******************************/
        var methods = {
            init : function() {
                return this.each(function() {
                    methods.appendHTML();
                    methods.setEventHandlers();
                    methods.initializeItems();
                });
            },

            /******************************
            Initialize Items
            Fully initialize everything. Plugin is loaded and ready after finishing execution
	    *******************************/
            initializeItems : function() {

                var listParent = object.parent();
                var innerHeight = listParent.height();
                var childSet = object.children();
                methods.sortResponsiveObject(settings.responsiveBreakpoints);

                var innerWidth = listParent.width(); // Set widths
                itemsWidth = (innerWidth) / itemsVisible;
                childSet.width(itemsWidth);
                if (settings.clone) {
                    childSet.last().insertBefore(childSet.first());
                    childSet.last().insertBefore(childSet.first());
                    object.css({
                        'left' : -itemsWidth
                    });
                }

                object.fadeIn();
                jQuery(window).trigger("resize"); // needed to position arrows correctly

            },

Прошу сильно не пинать т.к. в JS не силен )

Answer 1

[Алексей]

Добавьте alert(listParent) в "onresize" чтобы удостовериться что эта переменная есть на момент ресайза.

Comments

[skdon]

Выдает https://s.mail.ru/AB8D/TtLwVrB8e
Пробовал выводить высоту. Первый раз она равна 39, а должна 160

[Алексей]

"Первый раз" - это вы какой раз имеете в виду. Сразу после открытия страницы (trigger("resize")) или после того как все картинки загрузились, первый раз двигаете размер браузера?
Если первое - то картинки могут не успеть загрузиться, отсюда и высота неверная.

[skdon]

Первый раз я имел ввиду при загрузке страницы, если ничего не трогать.
"Если первое - то картинки могут не успеть загрузиться, отсюда и высота неверная" - вот и я сразу думал что из за этого. Но если ширина окна большая, то ведь все нормально.

[Алексей]

Возмонжо есть еще скрипты, реализующие, например отложенную загрузку изображений типа lazyload.

[skdon]

Нет. Ничего подобного вроде бы нет. А не подскажите, как тогда можно дождаться загрузки картинок, а только потом выполнить то что нужно.

[Алексей]

Обычно проблема с загрузкой картинок возникается когда скрипты запускаются через $(document).ready(function () { ... }); и это заменяют на $(window).load(function () { ... }); (jQuery)
Но я у вас не вижу кода, которые исполняет эти методы.

Answer 2

[0348raven]

Проще сделать абсолютное позиционирование с помощью CSS и все встанет как необходимо

.nbs-flexisel-container {
    height: 180px;
}

.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

Comments

[skdon]

а как быть тогда на другой странице tommy.1gb.ru/stitches , где высота картинки другая?

[0348raven]

skdon: ну задавай этому блоку-обертке тогда высоту с помощью js такую же как у картинки