Mvc完全な非同期スクリプトの読み込み

Question

Webページに非同期読み込みスクリプトに関する小さな問題があります。 私はページのすべてのスクリプトを非同期にロードする必要があります。私はGoogleで見つけた多くの手順を試しましたが、まだ完全ではありません。

1. スプリットのjQueryを含む1つのバンドルへのレイアウトからすべてのスクリプト：

   今、私はこのようにそれを持っています。

2. ページの下部に、非同期タグ付きのRenderFormatを呼び出します。
3. ここで私は問題が発生します： @RenderFormatでスクリプトがレンダリングされている状況を解決する必要があります。問題は、それらの スクリプトが必要以上に早くレンダリングされていることです。たとえば、

私はホーム/インデックスファイルでこれを持っている：

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

またはここでは、エラーを取得するだけで

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

、 "$はを定義されていない"、なぜならjqueryはまだロードされていません。

コンテンツの後、レイアウトファイルに私が持っている：

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

私はページ上の私のスクリプトのすべてを取り、1つのバンドルにそれらを与える場合は、すべてが正常ですが、私はへのスクリプトを望んでいませんレンダリングされる、 私はそれを特定のセクションでのみ行う必要があります。

次のアイデアは、このようにいろいろ書いを行いますカスタムRenderSection方法を、作成することでした。

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... 
}); 

は、方法は、それを解決する方法、ありますか？ ありがとうございます。

Answer 1

皆さん、解決しました。

レイアウトに私の現在のscripsあり：

... 

@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> 

そして内の他のファイル。あなたは次のスクリプトを呼び出す必要がある場合（インデックス、詳細...）

@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"); 
} 

は、ラファエル後たとえば、あなたは簡単なすべてだという非同期renderformatで新しいコールバックを作成します。

ありがとうございました