Download Asynchronous Mvc Scripts

Question

I have a little problem with asynchronous download scripts on my web page. I need to load all page scripts asynchronously. I tried many procedures that I found on google, but still this is not perfect.

Now it looks like this for me:

• Separate all scripts from layout to one package, including jquery.
• At the bottom of the page, a RenderFormat with the async tag is called.
• Now I have a problem: I need to solve a situation where scripts are rendered by @RenderFormat. The problem is that these scripts appear earlier than I need.

For example, I have this in my Home / Index file:

@Scripts.RenderFormat("<script async type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/raphael") 

or simply

 ... $(".datapicker").datapicker(); ... 

Here we get the error, "$ is not defined" because jquery is not loaded yet.

After the contents in the Layout file, I have:

 ... @Scripts.RenderFormat("<script async type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/frontall") ... @RenderSection("scripts", required: false) 

If I take all my scripts on the page and transfer them to one package, everything will be fine, but I do not want the scripts to be displayed, I only need to do this in a specific section.

The next idea was to create a custom RenderSection method that would do the following:

  function async(u, c) { var d = document, t = 'script', o = d.createElement(t), s = d.getElementsByTagName(t)[0]; o.src = u; if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); } s.parentNode.appendChild(o, s); } async("/bundles/jquery", function() { //here, load scripts from inner pages. Index, Detail... }); 

Is there any way how to solve it? Thank you so much for your time.

Answer 1

Ok guys decided.

There are my current scripts in the layout:

 ... @RenderSection("scripts", required: false) <script> function async(u, c, css) { var t = 'script'; var element = document.createElement(t); var s = document.getElementsByTagName(t)[0]; element.src = u; if (css) { t = "link"; element = document.createElement(t); element.href = u; element.rel = 'stylesheet'; element.src = null; var head = document.getElementsByTagName('head')[0]; head.appendChild(element, head); return; } if (c) { element.addEventListener('load', function (e) { c(null, e); }, false); } s.parentNode.appendChild(element, s); } function initScripts() { async("/content/css", null, true); async("/bundles/jquery", function () { @RenderSection("asyncScripts", required: false) }); } if (window.addEventListener) { window.addEventListener("load", function () { initScripts(); }, false); } else if (window.attachEvent) { window.attachEvent("onload", function () { initScripts(); }); } else { window.onload = function () { initScripts(); }; } </script> 

And in other files. (Index, Detail ...)

 @section scripts { <script type="text/javascript"> var czech_republic = {}; window.selectedRegions = []; czech_republic.regions = { @Html.Raw(string.Join(", ", regions.Select(r => string.Format("\"{0}\": \"{1}\"", r.RaphaelId, r.RaphaelCoordinates)))) }; </script> @section asyncScripts { @Scripts.RenderFormat("async(\"{0}\");", "~/bundles/raphael"); } 

If you need to call the following scripts, for example, after raphael, you simply create a new callback in renderformat async a, that's all.

Thank you all