Lighning Component: Rendering Lifecycle and JS static resources

Question

I would understand the exact order of execution about "Lightning Component Rendering Lifecycle" and JS static resource.

For example, we have this First Scenario.

Alpha.cmp:

<aura:component>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <ltng:require scripts="{!$Resource.jsResource}" afterScriptsLoaded="{!c.jsLoaded}" />       

</aura:component>

Alpha.js

({
    doInit: function (component, event, helper) {
       console.log('doInit');
},

    jsLoaded: function(component, event, helper) {
       console.log('jsLoaded');
}})

Who is the order of printing on the console?

In the Second Scenario, I would use a JS static resource (Lealeft.js for example) but I would use some attribute passed by a parent component.

Beta.cmp

<aura:component>

    <aura:attribute name="Tom" type="String"/>
    <ltng:require scripts="{!$Resource.jsResource}" afterScriptsLoaded="{!c.jsLoaded}" />       

</aura:component>

Beta.js

({
    jsLoaded: function (component, event, helper) {
       console.log('Tom=' + component.get("v.Tom"));
    }
}})

Is always true that afterScriptLoaded is executed when Rendering LifeCycle is finished?

This topic is very obscure for me! Thanks

Answer 1

1. Who is the order of printing on the console?

The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded. Don't use the init event to access scripts loaded by . These scripts load asynchronously and are most likely not available when the init event handler is called.

2. Is always true that afterScriptLoaded is executed when Rendering LifeCycle is finished?

1. Component loads and it's init handler will fire(if you have one).
2. Frameworks finishes the rendering the DOM in the browser.
3. ltng:require's afterScriptsLoaded method will be called