JavaScriptはonReadyの後に外部フレームワークをロードします

通常、HTMLソースコードのhead要素にすべてのフレームワーク（スクリプトとCSS）があり、ロードされるページをレンダリングしています。など。JavaScriptはonReadyの後に外部フレームワークをロードします

<html> 
    <head> 
    <script src="jquery.min.js"></script> 
    <script src="bootstrap.min.js"></script> 
    <link href="jquery.min.css"\> 
    <link href="bootstrap.min.css"\> 
    </head> 
</html>

しかし、あなたは唯一のjQueryを最初からロードしているとあなたがボタンをクリックするなどのアクションを実行したいような状況を想像して、いくつかのフレームワークを必要とする：私はjQueryのをロードし、それは次のようになりますブートストラップをしたいですブートストラップが提供する機能のような機能は、クリックの直後にロードする必要があります。

私の理解では、サイドが既にレンダリングされた後にロードされる必要があるフレームワークがOnReadyコールを実行する必要があるので、それが聞こえるほど簡単ではありません。これを達成するための簡単な方法はありますか？

敬具、マリウス

出典

2017-04-04 marius

ベストプラクティスです頭の中ではなくbodyタグの末尾 –

'$（document）.trigger（ 'ready'）'のようにこれらの呼び出しを手動で起動することができます。 –

ビュー/ページに必要なファイルをバンドルにパッケージ化して読み込みますか？ 'RequireJs'の使用は助けになるでしょうか？具体的な質問はありますか？または、あなたの問題を示すために書くことができる例ですか？ – Nope

「あなただけのjQueryを最初からロードしているとあなたがボタンをクリックするなどのアクションを実行し、オファーをブートストラップ何かのようないくつかのフレームワークの機能を必要としたいような状況を想像し、彼らクリック直後にロードする必要があります。

説明しているのは、依存関係のlazy loadingです。

RequireJSこれは非常にうまくいきます。あなたは、ユーザーのページロードのパフォーマンスをスピードアップするためにこれを行うには考えている場合

出典

2017-04-04 12:40:43

あなたは、単にそのようにタグの非同期プロパティを使用することができます。

<script src="jquery.min.js" async></script>

がhttps://css-tricks.com/thinking-async/

で非同期読み込みについてもっと読みます

あなたは、特定のイベントが、次のアプローチを使用した後、JSをロードするための他の理由がある場合：

function loadJavaScript(url) 
{ 
    var s = document.createElement('script'); 
    s.setAttribute('src', url); 
    s.setAttribute('async',true); 
    document.head.appendChild(s); 
}

あなたがのアドレスを渡すことができます関数を呼び出すためにonloadハンドラを使用してloadJavaScript('https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js')

UPDATE

としてスクリプトと、スクリプトのロード：スクリプトがで行くの

$(document).ready(function() { 
 
\t $('#test').click(function() { 
 
    \t console.log("oO"); 
 
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
    loadJavaScript('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js',function(){ 
 
    $('.selectpicker').selectpicker('refresh'); 
 
    }); 
 
    }); 
 
}); 
 

 

 
function loadCss(url,fn) { 
 
    var link = document.createElement("link"); 
 
    link.type = "text/css"; 
 
    link.rel = "stylesheet"; 
 
    link.href = url; 
 
    document.getElementsByTagName("head")[0].appendChild(link); 
 
} 
 

 
function loadJavaScript(url) 
 
{ 
 
    var s = document.createElement('script'); 
 
    s.setAttribute('src', url); 
 
    s.setAttribute('async',false); 
 
    if(typeof(fn) == "function") 
 
    { 
 
     fn(); 
 
    } 
 
    document.head.appendChild(s); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="test" type="button" class="btn btn-primary">Basic</button> 
 
<select class="selectpicker"> 
 
<option>1</option> 
 
</select>

出典

2017-04-04 12:43:44

こんにちは、高速回答ありがとうございます、残念ながらこれは私のために働いていません、私は小さなテストケースでした：https://jsfiddle.net/uvyetrcb/1/ – marius

@マリアス私はあなたの懸念を持っているので、 onloadハンドラを使用して、私の答えを更新してください。 –

@marius更新があなたに役立つことを願っています。 –

JavaScriptはonReadyの後に外部フレームワークをロードします

答えて

関連する問題