How to track the loading of a specific dom element before the entire tree is loaded?

Question

css

Shortly speaking. I'm making a loader for a website. It will have a picture. Everything would be fine, but he himself does not have time to load the picture and before his appearance, a destroyed site flickers. In general, I need a loader for a loader ;DDD. The first loader will be a white picture. Here's how to track if it's loaded and is ready to use before the whole tree is loaded. That is, window.onload is not allowed). Well, in general it was interesting how to do it right.

Answer 1

var ld_img = document.createElement('img');
ld_img.src = "path";
ld_img.onload
In general, this is how it happened)) Everything else does not work, which is higher. It does not have time to load, even if the script lies after the element.

Answer 2

You can use MutationObserver for newer browsers, there are also less performant workarounds for older IEs.

Answer 3

That is, window.onload is not allowed).

That's exactly what he needs. Just stick the "loader for loader" code at the very beginning of the "loader" ... of course, writing it correctly. I can’t even imagine other ways ...
Of course, you can get confused and go further. Load an empty page, and then load the DOM with Ajax...