jQuery для установки ширины тела на основе дочерней ширины работает только после перезагрузки страницы (используется в WordPress)

Question

Я создаю тему WordPress для горизонтального макета сайта портфолио фотографий и использовал пример кода в посте " Рассчитать общую ширину детей с jQuery ", который работает, но только когда я обновляю страницу.

Jquery находится в отдельном файле с именем horizontal.js и ставится в очередь из файла functions.php темы WordPress. Js получает ширину всех элементов списка в сообщениях, складывает их и помещает ширину в тело отдельных страниц сообщений.

jQuery(document).ready(function($) {
    var width = 0;
    $('body.single .long li').each(function() {
        width += $(this).outerWidth( true );
    });
    $('body.single').css('width', width + 500);
});  

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

Сайт находится в стадии разработки и ссылка http://www.laurendarling.com/2011website/photography/afterparty/ имя пользователя: гость, пароль: гость. Если вы щелкнете по выделенному заголовку записи в боковой навигационной панели, страница перезагрузится, и js установит ширину тега body, позволяя горизонтальное расположение.

Answer 1

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

jQuery(document).ready(function($) {

    // gets all photos in a post
    var allpics = $('body.single .long li');

    // gets first photo in list
    var firstpic = $(allpics).first();

    // hides all photos in a post except the first photo
    $(allpics).not(firstpic).hide();

    // holds function for one second and then adds width to body tag
    setTimeout(function() {
        var w = 0;
        $('body.single .long li').each(function() {
            w += $(this).outerWidth();
        });
        w+=500;
        $('body.single').css('width', w + 'px');

        // fades in the all the photos after body width is added
        $('body.single .long li').fadeIn('500');

    }, 1000);
});

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

Answer 2

Я знаю, что это старый вопрос, но я использую ваш код в проекте, над которым я работаю.Я заставил setTimeout хорошо выглядеть!

setTimeout(function() {

        $("#user-book-list").hide().css("margin", "-2px 0 0 0");

        var w = 0;

        $("#user-book-list li").each(function() {
            w += $(this).outerWidth();
        });

        w += 500;

        $("#user-book-list").css("width", w - 320 + "px");

        // fades in the all the photos after body width is added
        $("#user-book-list li").fadeIn("100");

        $("#user-book-list").css("margin", "2px 0 0 0").fadeIn("100");

}, 1000);

Поля на #user-book-list предназначены для компенсации появления пользовательской (веб-набивки) полосы прокрутки, когда загружаются остальные элементы li.Конечно, в других браузерах скачок будет заметен.li элементы теперь стали более элегантными для меня.

Спасибо, что поделились своим кодом!