Can function be called after speficic element is loaded?

Question

Is there any way to call function after speficic element is loaded?

Something like this:

var element = $('.elements-class');
element.on('load', function() {
    // Do something
});

EDIT (Better explanation):

After DOM is ready, I have element and inside that element is couple of images and some text. So, I want to animate that block after it's loaded, and all it's childs. I don't want to wait the rest of the page to be loaded. Only that specific element, in this example the element.

Use `document.ready`, or the callback of an AJAX call if that's where you're adding the HTML. The `load` event does not work reliably for elements other than `img` and `object` — Rory McCrossan, Aug 14 '18 at 13:34
I'm not adding anything. Everything is already in .html file. I'm trying to start animations on speficic elements when they are done with loading. Something like, animating "above the fold" content after it is loaded, if you know what I mean. — RobiZzT, Aug 14 '18 at 13:38
If it's a static HTML file then there isn't any incremental loading of the elements; the browser renders the whole page at once. — Daniel Beck, Aug 14 '18 at 13:39
If you are asking to do something after an *animation* has finished, then *loaded* is the wrong word. Also, this has been asked before. — trincot, Aug 14 '18 at 13:39
$(document).on('load change','yourselector',function(){ your business logic... }) — Dongdong, Aug 14 '18 at 13:41
How can I say this any clearer? After DOM is ready, I have
element and inside that element is couple of images and some text. So, I want to animate that
block after it's loaded, and all it's childs, but I don't want to wait the rest of the page to be loaded. Only that specific element, in this example the
element. — RobiZzT, Aug 14 '18 at 13:48
There is no event for something like that. You would have to implement something that checks the load status of the individual images first (if that’s what you want to wait for?), and then triggers whatever you want to run when that’s the case for all of them. — CBroe, Aug 14 '18 at 14:22
@RobiZzT I updated my answer to match your edit, let me know if that's what you are looking for. — Alvaro Castro, Aug 14 '18 at 14:23

Alvaro Castro · Accepted Answer · 2018-08-14T14:22:40.670

According to this comment in your question

I'm not adding anything. Everything is already in .html file. I'm trying to start animations on speficic elements when they are done with loading. Something like, animating "above the fold" content after it is loaded, if you know what I mean.

You can wait for the document.ready event. <div> or <header> elements don't support load or ready events to attach to, load event is usually aimed to elements that load a remote resource like an <img>.

Doing this:

$(function () {
    //Do something
});

You ensure the code in the callback is executed when the document finishes loading.

To follow up your edit. You can insert <script> tags into the dom and they will be executed in the order they are inserted. For example:

<div>
    <h1>Fancy title</h1>
    <script>
        /*
            here you can put code to manipulate dom elements inserted
            before this script tag.
            Trying to do $('p') here will not find the element because
            is not already in the dom.
        */
    </script>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Let me know if this is what you need.

I know how document.ready works. Is there any way I can wait for element to load after DOM is ready. Like, is there any synonym for window.on('load'), but for speficic element? — RobiZzT, Aug 14 '18 at 13:57
That element you are expecting to load comes from some AJAX response or is appended **after** the document is ready? Because if not, you should use document.ready. — Alvaro Castro, Aug 14 '18 at 14:00
While page is loading, everything loades in order. But, for example, images are loaded on window.on('load'). But I don't want to wait whole page to be loaded. Only my first element (
) and all images in that element. — RobiZzT, Aug 14 '18 at 14:28

score 1 · Answer 2 · answered Aug 14 '18 at 14:01

As you have everything already in your HTML and you want to do some action/call some function you can use:

$(document).ready(function () {
    //add your code here
});

Refer to JQuery documentation to understand better how .ready function works.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

If you also want some function to always execute something when the element changes you can attach the .change() to this element, as you can see below:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

bind event to all elements with class target.

$( ".target" ).change(function() {
   alert( "Handler for .change() called." );
});

This will trigger the alert inside change function everytime the DOM has changed on the attached elements.

So, answer is: No, I can't check if specific elements (and it's children elements) are loaded. Thank you. — RobiZzT, Aug 14 '18 at 14:16

Can function be called after speficic element is loaded?

2 Answers2