Is there a normal vanilla JS/HTML (or JQuery) event that fires when an element begins/finishes rendering?

Question

I'd like something similar to the document.ready event, but for any DOM element.

In more details, I'm hacking away at an app which has a custom framework. I'm trying to add a loading screen. This screen should disappear whenever a certain element pops up on the screen.

Now I don't really know how I'd do this in a clean way, or what a recommended way of doing such things would be, but at the moment, for me it would be enough if I could implement this pseudocode

container.show_loading_spinner()
// .. other stuff ...
// this should only trigger when the next line, which starts creating elements begins
container.on_drawing_begin(function() 
    {container.hide_loading_spinner()})

//when this begins drawing, the spinner should get hidden.
container.create_some_elements()

I realise this is probably quite complex, and kind of hope I won't be disregarded as a noob but I'm mainly focused on backend development. Is this thing that I'm asking even possible, or should I think this through in a completely different way?

[EDIT]

Q: What is my definition of "rendering"?

A: The moment when an element is present in the DOM and visible on the screen, I call it "rendered". The moment when it's not in the DOM, it's unrendered. Rendering is the process which takes the DOM (and corresponding screen - if the element is visible) from the first state to the second.

More casually though I just want "some event" which is triggered very close in time to the moment when an element begins to render. I need the beginning, because that's when I want to turn off the spinner. I don't want the spinner to be present on the screen at the same time as my elements.

Answer 1

What if you trigger a custom event like hideSpinner when you start rendering your elements?

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events