#6 Wait for multiple scripts
Requirements
Resources
Await libraries, before executing functions with turnOn
This page waits for a thirdparty library to finish loading, then executes a JavaScript function with turnOn and passes a domAttribute as parameter. The executed JavaScript then triggers thirdparty library code, which modifies the DOM element in the page that causes an animation.
In this tutorial you'll learn how to:
- Include an external library
- Execute a JavaScript function after the library has finished loading
Output
#6 Wait for multiple scripts
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@using ToSic.Razor.Blade; @inherits Custom.Hybrid.Razor14 <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2>Await libraries, before executing functions with turnOn</h2> <p> This page waits for a thirdparty library to finish loading, then executes a JavaScript function with turnOn and passes a domAttribute as parameter. The executed JavaScript then triggers thirdparty library code, which modifies the DOM element in the page that causes an animation. </p> <br> In this tutorial you'll learn how to: <ul> <li> Include an external library </li> <li> Execute a JavaScript function <b>after</b> the library has finished loading </li> </ul> Look at the element below to see the effect. </div> </div> @{ // Create unique DOM attribute with Module Id var uniqueDomAttrubute = "turn-on-example-" + CmsContext.Module.Id; } @* Inject attribute into DIV, to make it accessible for query *@ <div @uniqueDomAttrubute></div> @* Wait for thirdparty library to load, then execute the window.turnOnTutorial200.init function and pass the domAttribute as JSON *@ @* This tutorial uses turnOn, see turnOn tutorials *@ @{ var data = new { domAttribute = uniqueDomAttrubute }; } @Kit.Page.TurnOn("window.turnOnTutorial200.init()", data: data) @* Include thirdparty library from CDN *@ <script src="https://unpkg.com/spritejs@3/dist/spritejs.js"></script> @* Include local JavaScript file *@ <script src="@CmsContext.View.Path/200-multi-file.js" @Kit.Page.AssetAttributes()></script> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })