How can I use the script defer attribute for ASP MVC 4 Bundles with Scripts.Render

Question

I have looked through Google and Stackoverflow and haven't found an answer for this. Is there any built in way to make a bundle execute as deffered or does someone know of an extension helper method that someone wrote to do this?

What kind of deffered execution you are looking for ? Can you be more specific ? — Shyju, May 29 '13 at 21:42
I just want to defer any scripts that aren't needed for page to load initially. I probably won't use it much but I want to know if there is a way and other people might too searching Google. — kyleb, May 29 '13 at 21:48

score 56 · Accepted Answer · answered Aug 01 '13 at 18:40

56

Try upgrading the Web Optimization to version 1.1.0 on Codeplex Site or via Nuget Package

In version 1.1.0 they included Element Template Strings. So if you want a script tag to contains the defer attribute you can easily do this:

@Scripts.RenderFormat("<script src='{0}' defer></script>","~/bundles/jquery")

and the following markup will be generated:

<script src="/Scripts/jquery-1.7.1.js" defer></script>

answered Aug 01 '13 at 18:40

Diego Fernandez

651
8
8

This breaks CDN fallbacks using `CdnFallbackExpression`. The fallback check will be executed before the deferred script is loading causing the fallback to always kick in. – Rudey Feb 18 '17 at 15:14

score 19 · Answer 2 · edited May 23 '17 at 12:34

The answer above is great. I just want to quickly paste my code over here for those who wants to have a more concise syntax.

Add a new C# class

// --------------------------------------------------------------------------------------------------------------------
// <copyright file="Scripts7.cs" company="Believe">
//   http://believeblog.azurewebsites.net/
// </copyright>
// --------------------------------------------------------------------------------------------------------------------

using System.Web;
using System.Web.Optimization;

namespace MVCExtension
{
    /// <summary>
    ///     The scripts.
    /// </summary>
    public static class Scripts
    {
        /// <summary>
        /// Render scripts as deferred
        /// </summary>
        /// <param name="paths">
        /// The paths.
        /// </param>
        /// <returns>
        /// The <see cref="IHtmlString"/>.
        /// </returns>
        public static IHtmlString RenderDefer(params string[] paths)
        {
            return Scripts.RenderFormat(@"<script src='{0}' defer></script>", paths);
        }
    }
}

Then, use Razor syntax:

@Scripts.RenderDefer("~/bundles/jquery")

Or Webform syntax:

<%: Scripts.RenderDefer("~/bundles/jquery") %>

That has wider compatibility with older browsers and XHTML parsers. Read more: http://www.w3schools.com/tags/att_script_defer.asp — Believe2014, Jun 17 '14 at 15:15
Please explain what does not work for you. Is there an error message? — Believe2014, Apr 22 '15 at 12:58
Am I missing something or will this cause ambiguity? `Scripts.RenderFormat` won't work because your class is called `Scripts` too. That's easy to fix though. — Rudey, Feb 16 '17 at 19:57

score 4 · Answer 3 · answered Apr 05 '17 at 15:06

4

You can use BundleTable.Bundles.ResolveBundleUrl :

<script src="@(BundleTable.Bundles.ResolveBundleUrl("~/bundles/jquery"))" defer></script>

answered Apr 05 '17 at 15:06

Yanga

2,885
1
29
32

Maybe you can help me. Look at this : https://stackoverflow.com/questions/57904486/how-can-i-add-defer-attribute-in-the-sitecore-foundation-frameworks-min-js – moses toh Sep 16 '19 at 13:57

curious.netter · Answer 4 · 2020-09-16T09:59:04.890

Late answer but I would like to add because I am across almost similar problem where I need to add a data attribute to the bundled scripts (in relation with a GDPR cookie solution).

The solution CookieBot was blocking some of the scripts on Auto-Mode, therefore, I need to implement in Manual mode and mark all of my scripts to be ignored by CookieBot script.

My scripts in BungleConfig.cs looks like this:

              bundles.Add(new StyleBundle("~/Bundles/late").Include(
                  "~/Scripts/jquery.pep.js",
                  "~/Scripts/jQuery.easing.1.3.js",
                  "~/Content/swiper/js/swiper.js",
                  "~/Scripts/uiActions.js",
                  "~/Scripts/xxm.js",
                  "~/Scripts/addtohomescreen.js",
                  "~/Scripts/d3.min.js"
            ));

And, in my _Layout.csthml.

  @Scripts.RenderFormat("<script data-cookieconsent='ignore' src='{0}' > </script>", "~/Bundles/late")

And, this is what I got after being rendered.

<script data-cookieconsent="ignore" src="/nyhed/Bundles/late?v=k3Zae8tC12ZNx0x1iAhyu4U0c8xmGE5TrdLdAqg9C8M1"> </script>

Now, the original question, one can add defer or async along with or without data attribute.

Scripts.Render and scripts.RenderFormat both are referenced to System.Web.Optimization, and should be already availabe on MVC project.

How can I use the script defer attribute for ASP MVC 4 Bundles with Scripts.Render

4 Answers4

Linked