How to know if an element is rendered?


Tags: javascript,css

Problem :

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?



Solution :

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


    CSS Howto..

    How To Left Align the Title Using CSS

    How do you create and run an html page directly from LocalStorage?

    How to Remove CSS line-through

    How do I properly set width to a percentile and keep a min-width in pixels?

    Cannot get Font Awesome Images to Show

    How to select nested elements using standard CSS selectors (nth-of-type or nth-child) for Selenium?

    how to set break for print page(div) using css?

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How to vertically center more than one line of text (works only on chrome)?

    How to wrap text in css

    How to remove a CSS style on the fly

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

    How to apply External CSS to Html Helper Class Elements?

    How to center a span element in CSS? [closed]

    how to spread small image file in background and it should scroll with other elements

    How to write regex to extract specific key format and value from CSS file?

    How to change CSS according to user Operating System

    How to do this kind of Button in CSS?

    CSS - How to center a div relative to a background image positioned as cover

    CSS - how to align text and an image vertically?

    How to position text on bottom?

    How to replicate {cursor: hand; cursor: pointer} in jQuery

    How to display a border-bottom only if table cells are not empty (CSS)

    How To Apply CSS rule to Classes with Specific Keywords Inside Them?

    How can I wrap lines of text in an unordered list?

    How to style HTML select option hover and selected option effects

    How to align a Wordpress navigation bar to the right of a logo?

    CSS Position relative goes over fixed how to fix this?

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?