jquery html() callback function

Question

This question has been asked a couple times but not answered in such a way that it can help me with my specific issue. From a nav list, on click of an item, I'm loading some HTML content into a div using the .html() function. There is no ajax request. The HTML content has images. Hence it can take a moment to load up. And since .html() is a synchronous operation, the next line will immediately execute.

As soon as I load contents using .html(), I'm enabling a third party custom scrollbar called tinyscrollbar. If the loaded content had images, then the scrollbar calculates the height of the content div a little earlier than the images are loaded resulting into a scrollbar that won't scroll all the way.

I do not want to use .setInterval(). Is there a solution for this? Is there some other function in jQuery that acts like the .html() function but has some sort of callback feature?

Thank you.

You could determine how many images were in the content, then listen for their onload events — Mike Robinson
– Mike Robinson, Commented Apr 24, 2012 at 15:12
Did you try defining a set width and height on each image tag? Even if the images are not loaded yet, the scrollbar should be able to calculate the height correctly if it knows the image height. — Brian Glaz
– Brian Glaz, Commented Apr 24, 2012 at 15:15
Would $(document).ready not work since its waiting on images? — Matthew Riches
– Matthew Riches, Commented Apr 24, 2012 at 15:15
robinson comment seems the right answer. You can simply iterate over the image with something like $("#mydiv img"). — Denys Séguret
– Denys Séguret, Commented Apr 24, 2012 at 15:20
@MatthewRiches $(document).ready would not work because it does not wait for images and css to be done loading. — user400654
– user400654, Commented Apr 24, 2012 at 15:20

Brad Larson · Accepted Answer · 2017-07-13 16:30:44Z

60

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

edited Jul 13, 2017 at 16:30

Brad Larson

170k45 gold badges401 silver badges574 bronze badges

answered Aug 4, 2013 at 5:53

Debjit Saha

1,9781 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

No Results Found Over a year ago

Be careful linking to (I assume) your blog excessively with little other information, such as your similar answer here. It can be seen as spam.

Boykodev Over a year ago

It's better to use then(), instead of done() to be more compliant with standard JavaScript Promise object: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

user400654 Over a year ago

This answer is misleading. .html() is synchronous. .promise().done() isn't waiting for the .html() method to complete. Instead, it's simply running the callback on the next tick of the event loop, similar to what would happen if you used setTimeout(yourLogicFunction, 0). It may "work", but it's not waiting for .html() to complete.

kinsley kajiva Over a year ago

@Deb is this call documented on the official API docs , because i have have been looking around this as i have concerns around browser compatibility .

Irf Over a year ago

Here is the link, that is in concern in the comments, found it good to be pasted.. and plus, the solution definitely works!! https://digitizor.com/jquery-html-callback-function-using-promise/

walmik · Accepted Answer · 2012-04-24 15:40:26Z

12

Based on Mike Robinson's (and dystroy's) suggestion the answer to my question is:

$("#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();
            }
        });
    });

answered Apr 24, 2012 at 15:40

walmik

1,4522 gold badges13 silver badges30 bronze badges

3 Comments

Kozuch Over a year ago

I had a similar problem with an iScroll and (not properly loaded) images too. Due to not loaded images the parent DIV was not high enough and the scroll did not show whole content. This solution works!

ow3n Over a year ago

This is the correct answer. If there are images added with .html() they need to load first.

tim92109 Over a year ago

Yes - THIS is the correct answer. Don't know why the answer above is marked correct.

Hüseyin BABAL · Accepted Answer · 2012-04-24 15:28:25Z

-4

In order to check whether image loaded or not you can use following;

<img src="your_image_path" />


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

answered Apr 24, 2012 at 15:28

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

Comments

pmr · Accepted Answer · 2012-04-25 11:41:15Z

-6

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

edited Apr 25, 2012 at 11:41

pmr

60k11 gold badges120 silver badges162 bronze badges

answered Apr 24, 2012 at 15:22

Joey

1

1 Comment

mshahbazm Over a year ago

Question is about callback of HTML , not about windows load event.

Collectives™ on Stack Overflow

jquery html() callback function

4 Answers 4

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related