JavaScript не изменяет размер элемента UL иногда при вставке элементов LI с помощью Jquery.

У меня есть приложение Html/JavaScript, содержащее N столбцов, которые должны быть достаточно большими и содержать все возможные элементы LI из всех столбцов.

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

Это прекрасно работает, когда элементы LI содержат обычный текст. К сожалению, когда элементы LI вместо этого содержат изображения, у различных браузеров возникают проблемы. Например, когда я впервые загружаю страницу в FireFox, она выглядит так, как показано на скриншоте ниже, но при повторном обновлении она работает нормально. Он также не работает должным образом в Chrome.

Мое приложение не предварительно -заполняет элементы LI при загрузке страницы -оно использует JavaScript следующим образом:

function populateUnsetAnswers(unsetCategoryAnswers) {
    for (i in unsetCategoryAnswers) {
        if (unsetCategoryAnswers.hasOwnProperty(i.toString())) {
            $('#categoryQuestionArea #possibleAnswers').append(
                categoryAnswerLiTag(unsetCategoryAnswers[i])
            );
        }
    }
}

function categoryAnswerLiTag(unsetCategoryAnswer) {
    var html = '<li id="' + unsetCategoryAnswer.id + '">';

    if (unsetCategoryAnswer.image) {
        html += '<img class="categoryAnswerImage" title="';
        html += unsetCategoryAnswer.text;
        html += '" src="/trainingdividend/rest/streaming/';
        html += unsetCategoryAnswer.image.fileName;
        html += '" style="height: ';
        html += unsetCategoryAnswer.image.height;
        html += ';';
        html += '" />';
    } else {
        html += unsetCategoryAnswer.text
    }

    html += '</li>';

    return html;
}

Когда страница загружается, запрос ajax извлекает все объекты, которые нужно поместить в LI, а затем вызывает первую функцию выше.

После того, как все элементы LI созданы, я вызываю эту функцию сразу после нее:

function resize() {
    var currentHeight, totalHeight;
    totalHeight = 0;

    $("#categoryQuestionArea ul").children().each(function() {
        currentHeight = $(this).height();

        totalHeight += currentHeight + 13;
    });

    $("#categoryQuestionArea ul").height(totalHeight);
    $("#categoryQuestionArea div#separator").css("padding-top", (totalHeight / 2) + "px");
}

Есть ли способ сказать jQuery: «Не вызывать изменение размера ()до тех пор, пока все LI не будут полностью загружены и изображения представили"?

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

Любая помощь?Спасибо