# How to use didRender event on a component?

**URL:** https://meta.discourse.org/t/how-to-use-didrender-event-on-a-component/52315
**Category:** Development
**Created:** [2016 年 11 月 1 日午後 5:38 UTC](https://meta.discourse.org/t/how-to-use-didrender-event-on-a-component/52315 "2016-11-01T17:38:51Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Aman\_Jagga](https://avatars.discourse-cdn.com/v4/letter/a/ac8455/32.png) [@Aman\_Jagga](https://meta.discourse.org/u/Aman_Jagga)
#### Post date: [2016 年 11 月 1 日午後 5:38 UTC](https://meta.discourse.org/t/how-to-use-didrender-event-on-a-component/52315/1 "2016-11-01T17:38:51Z")

</div>

I want to start some css transition when my page is fully loaded(including all background images), so I am trying  
didRender event of a component but its never called.This is how my codes look like

```
export default Ember.Component.extend({
    didRender() {
    	console.log('did render working');
		var home =$('#main-outlet')[0];
	    home.className += " homePage";
		startTimer(5);
	},
	willDestroyElement() {
		console.log("destroying view");
		var home = $('#main-outlet')[0];
	    home.className = " wrap";
	}
});

```

When I use didInsertElement, my code works fine but executed before getting loading the images itself?  
Any idea or an alternative approach on this?