Функция обратного вызова jquery html()

Этот вопрос задавали пару раз, но не отвечали так, чтобы он мог помочь мне с моей конкретной проблемой. Из списка навигации, щелкнув элемент, я загружаю некоторый HTML-контент в div с помощью функции .html(). Нет запроса ajax. Содержимое HTML имеет изображения. Следовательно, может потребоваться некоторое время для загрузки. И поскольку .html() является синхронной операцией, следующая строка будет немедленно выполнена.

Как только я загружаю содержимое с помощью .html(), я включаю стороннюю настраиваемую полосу прокрутки, называемую tinyscrollbar. Если загруженный контент имел изображения, то полоса прокрутки вычисляет высоту содержимого div немного раньше, чем загружаются изображения, что приводит к полосе прокрутки, которая не будет прокручиваться полностью.

Я не хочу использовать .setInterval(). Есть ли решение для этого? Есть ли другая функция в jQuery, которая действует как функция .html(), но имеет какую-то функцию обратного вызова?

Спасибо.

Ответ 1

На основании предложения Майка Робинсона (и dystroy) ответ на мой вопрос:

$("#myContentDiv").html('HTML content comes here');
var contentImages = $("#myContentDiv img");
    var totalImages = contentImages.length;
    var loadedImages = 0;
    contentImages.each(function(){
        $(this).on('load', function(){
            loadedImages++;
            if(loadedImages == totalImages)
            {
                $("#myContentDiv").tinyscrollbar();
            }
        });
    });

Ответ 2

$('#divId').html(someText).promise().done(function(){
    //your callback logic / code here
});

Ответ 3

Чтобы проверить, загружен ли образ или нет, вы можете использовать следующее:

<img src="your_image_path" />


<script>
    $('img').load(function() {
        //call_your_function();
    });
</script>

Ответ 4

$(window).load(function() {
  // code here
})();