Запуск функции jQuery после загрузки всех носителей - PullRequest
3 голосов
/ 10 июня 2011

У меня есть простой скрипт jQuery, который выдвигает нижний колонтитул в конец страницы, даже если содержимое недостаточно длинное:

$(document).ready(function(){
    positionFooter();
    function positionFooter(){
        //get the div's padding
        var padding_top = $("#footer").css("padding-top").replace("px", "");
        //get the current page height - the padding of the footer
        var page_height = $(document.body).height() - padding_top;
        var window_height = $(window).height();
        //calculate the difference between page and window height
        var difference = window_height - page_height;
        if (difference < 0) 
            difference = 0;
        //write the changes to the div
        $("#footer").css({
            padding: difference + "px 0 0 0"
        })
    }
    //re-run the function if browser window is resized
    $(window).resize(positionFooter)
});

К сожалению, триггер (document) .ready запускается рано идоза не учитывает загрузку изображения и шрифта, поэтому рассчитанное значение является неправильным.Есть ли триггер, который подходит для такого рода задач?

Кроме того, сайт, который я создаю, использует Disqus для комментариев, который также снова изменяет длину страницы, хотя я думаю, что мне нужен обратный вызов изскрипт Disqus, чтобы учесть это изменение.

Ответы [ 5 ]

9 голосов
/ 10 июня 2011

попробуй $(window).load()

Вы также можете проверить документацию jQuery по различным событиям загрузки документов: http://api.jquery.com/category/events/document-loading/

Надеюсь, это поможет

1 голос
/ 10 июня 2011

Хотя это довольно легко сделать с чистым CSS, следующий твик в последней строке должен помочь с начальной загрузкой:

    $(window).resize(positionFooter).resize();
});

Также рекомендуется использовать обработчик событий resize с регулятором, который довольно легко реализовать. Включите дополнительный бит JS и измените тот же кусок кода на:

    $(window).resize($.throttle(250, positionFooter)).resize();
});
0 голосов
/ 10 июня 2011

Вы можете выполнить это в чистом CSS с использованием техники закрепления нижнего колонтитула.

http://www.cssstickyfooter.com/

0 голосов
/ 10 июня 2011

Интересно, может ли лучше использовать окно windows.onload?Я думаю, что будет ждать загрузки средств массовой информации.

...