How to know if an element is rendered?

Question

My element has transition: transform .5s

then it has a separate class: transform: translatex(-100%)

So what I would like to achieve is that initially, the element is positioned towards the left. ~~At window onload,~~When the element is rendered, I remove the transform class, and the browser would animate the element back to its correct position.

But what actually happens is that when the page becomes visible/rendered, the element is already at the correct position. and there is no animation.

I tried setTimeout(function() {}, 0); it doesn't work. If I setTimeout for 1 second, it works, but sometime rendering takes long, and I have to setTimeout for 2 seconds. But then sometimes it renders fast, and 2 seconds is a long time to wait.

So overall, I feel this is not a reliable or a correct way of doing this.

How can I achieve what I want, the correct way?

Edit: Sorry guys, after trying to put together a demo, I realized I wasn't removing the class at window onload. This is because my element and its javascript and css are loaded with AJAX. So it can happen before the window onload or after the window onload.

Anyway, now my question is, what if the window takes a long time to load? Could it be possible that my element would be rendered before window finishes loading? Or does browsers only render when the entire window finishes loadings?

Because I want to animate the element as soon as possible. So, is it safe to wait for window onload, in the case that window takes a long time to load(images and slow connection, and stuff)?

And if I load the element with AJAX after the window loads, could I immediately run the animation by removing the transform? Or should I detect for when the element is rendered?

The method you describe sounds like it should work. Can you show us a live example where it doesn't? — Halcyon, Apr 25 '15 at 18:25
Hard to help when we don't have a demo that replicates problem — charlietfl, Apr 25 '15 at 18:28
Can you give us a simple demo, i was thinking that your code was executed before the document properly loads, but i missed the part that you mentioned "At window onload". I posted an answer (now deleted) talking onload events because you say that "render sometime takes long and some times its fast" and i tough that you refer to the entire dom content. If the element is an image you should check this post http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript — ecarrizo, Apr 25 '15 at 18:35
What about a CSS animation? https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS — Zealot, Apr 25 '15 at 18:43

score 4 · Accepted Answer · answered Apr 26 '15 at 05:12

4

You might want to try using a combination of the DOMContentLoaded event and requestAnimationFrame. DOMContentLoaded fires after the document has been completely loaded and parsed but before all of the images and other assets on the page have completed downloading. requestAnimationFrame will delay the removal of the class until after the page has been painted so the element will properly transition.

var box = document.getElementById('box'),
    showBox = function (){
      box.classList.remove('offscreen');
    };
document.addEventListener("DOMContentLoaded", function(event) {
    window.requestAnimationFrame(showBox);
});

jsfiddle

answered Apr 26 '15 at 05:12

Useless Code

10,586
4
30
37

Yes, your method makes sense. However, when I view the jsfiddle in both Chrome and Firefox, the box simply appears, and there is no transition. Edit: After moving transition from 'offscreen' class to '#box', it now works. Thanks! – BigName Apr 26 '15 at 20:20
Hmm was working fine for me in Firefox, maybe I made that change but forgot to save it. The fiddle has been updated now. – Useless Code Apr 26 '15 at 21:55
What exactly doesn't work? What browser are you using? It should work in IE11+ and any remotely recent version of any of the major browsers, aside from Opera Mini. – Useless Code Jan 05 '17 at 22:13

score 1 · Answer 2 · answered Apr 26 '15 at 05:36

1

You should use DOM Content Loaded event of javascript

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

This will be fired only when your entire content is loaded and parsed fully by your browser.

answered Apr 26 '15 at 05:36

Ankit Tanna

1,540
5
31
55

Yes, my AJAX call was made in 'DOMContentLoaded', and because I was testing on my local machine, the AJAX loaded instantly, and gave me the result I described in the question. I have moved the AJAX call to the window 'load' event. – BigName Apr 26 '15 at 20:14

score 0 · Answer 3 · edited May 23 '17 at 12:32

Don't consider this an answer as I am sure you can find something more elegant, but this may give you some ideas.

Add this to the javascript AJAXed in - be sure to wrap the javascript in a document.ready:

$(function(){
    var giveup = 0; //in case something goes wrong
    var amirendered = 0;
    while (amirendered==0){
        setTimeout(function(){
            if (element.length){
                amirendered = 1;
                $('#myElement').addClass(doTransition);
            }
        },200);
        giveup++;
        if (giveup>200) amirendered++; //prevent endless loop
    }

}); //END document.ready

Does document.ready fire for every time new element is added to the DOM through AJAX, or does it only fire for the initial document? — BigName, Apr 25 '15 at 19:49

How to know if an element is rendered?

3 Answers3