jQuery - Only run function once element has loaded

Question

I am using jQuery to calculate some sizings and add CSS to an element like this..

jQuery(document).ready(function(){
    jQuery(document.body).css("margin-top", jQuery(".myelement").height());
});

The problem is that the function fires before the myelement has actually appeared so cant get the height.

Is there a way to wait until / if .myelement is rendered before running the function? I did look at load but I think that is now deprecated

How and when does you element appear that it's occurring after DOM-ready? Can you add a callback to the code that loads your element to do the resizing? — Cᴏʀʏ, Aug 13 '18 at 21:15
myelement is actually a div containing some text, i think it is added afterwards using javascript but I have no control over that — fightstarr20, Aug 13 '18 at 21:23
with this few info I may suggest [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) even if it's expensive — gaetanoM, Aug 13 '18 at 21:27
Just a quick FYI, while .load() is removed, you can use .on("load", fn) to attach to that event. Take a look at this answer: https://stackoverflow.com/questions/7434685/event-when-element-added-to-page. My only suggestion would be if you go the setTimeout route, use requestAnimationFrame instead. Mutation Observer is probably the cleaner approach if it is supported in all of the browsers you support. — Erik Nedwidek, Aug 13 '18 at 21:31

score 1 · Answer 1 · answered Aug 13 '18 at 21:31

1

If .myelement is an image, you can use its load event to wait for it to be rendered.

jQuery(document).ready(function($) {
    $(".myelement").on("load", function() {
        $(document.body).css("margin-top", $(this).height());
    });
});

answered Aug 13 '18 at 21:31

Barmar

741,623
53
500
612

Unfortunately, myelement is not an image – fightstarr20 Aug 13 '18 at 21:34
Are there images inside it? There has to be some content whose size can't be determined when the DOM is ready, or the height will be known. – Barmar Aug 13 '18 at 21:36
The content sees to be added after the dom is ready. I have added a delay to things and it correctly gets the size – fightstarr20 Aug 13 '18 at 21:42
Can you modify the code that adds the content, and do this after it's done? – Barmar Aug 13 '18 at 21:43
I don't have any control over the code that adds the content unfortunately – fightstarr20 Aug 13 '18 at 21:54
Then a `MutationObserver` or `setInterval` may be necessary to wait for it. – Barmar Aug 13 '18 at 21:55

jQuery - Only run function once element has loaded

1 Answers1