Функция JQuery не работает должным образом

Question

Я написал небольшую функцию для размещения логотипа посередине между левой стороной окна браузера и (по центру) навигационным меню. Элементы меню заполняются из базы данных, причем первый элемент получает идентификатор item0.

function positionLogo(){
    var $menuleft=0;
    var $element=document.getElementById('item0');
    if ($element.offsetParent) {
        do {
            $menuleft+=$element.offsetLeft;
        } while ($element=$element.offsetParent);
    }
    var $logoleft=($menuleft/2)-130; // As logo is 260px wide
    if ($logoleft<0) {
        $logoleft=0;
    }
    $('#logo').css('left',$logoleft);
}

$(document).ready(function(){
    positionLogo();
});

$(window).resize(function(){
    positionLogo();
});

Это прекрасно работает, когда окно изменено в размерах, но когда оно впервые запускается при загрузке страницы, позиция, которую он устанавливает, составляет около 20 пикселей слишком далеко вправо (т.е. $ logoleft на 20 больше, чем должно быть). Как только размер страницы изменяется, она переходит в правильное положение.

В данный момент нигде нет в живых, но у кого-нибудь есть идеи? Спасибо!

Answer 1

Заменить это:

$(document).ready(function(){
    positionLogo();
});

$(window).resize(function(){
    positionLogo();
});

С этим:

$(window).bind('load resize', positionLogo);

Для завершения требуется макет и все размеры (загрузка изображений и т. Д.), Поэтому вместо document.ready требуется метод window.load. Объедините это с bind(), принимающим события, разделенные пробелом, и вы можете получить его в таком простом однострочном обработчике, как этот. Еще одно замечание: не нужно оборачивать только функцию в function() { }, просто введите имя функции, как у меня было выше:)

Answer 2

Вы пробовали обрабатывать window.onload? Это будет срабатывать, когда страница полностью загружена, а не тогда, когда DOM будет готов (например, $(document).ready)

Answer 3

Я не смог повторить это явление. В IE есть какая-то ошибка, связанная с offsetParent, которая может иметь к этому отношение в зависимости от того, как вы расположили элементы. Вы можете использовать метод offset в jQuery, чтобы обойти браузер там несовместимости.

По какой-то причине он работает даже в Firefox без указания единицы для стиля left, но у него действительно должен быть один.

function positionLogo(){
   var menuleft = $('#item0').offset().left;
   var logoleft = Math.max(0, (menuleft / 2) - 130); // As logo is 260px wide
   $('#logo').css('left', logoleft + 'px');
}

или просто:

function positionLogo(){
   $('#logo').css('left', Math.max(0, ($('#item0').offset().left / 2) - 130) + 'px');
}

Answer 4

Если изменение размера окна работает, то, возможно, вам следует попробовать запустить функцию с изменением размера:

поэтому замените:

$(document).ready(function(){
    positionLogo();
});

с:

$(document).ready(function(){
    $(window).resize();
});