この問題にはさまざまなアプローチがあると確信しており、いくつか考えることができます。しかし、これについて他の人の意見を聞きたいです。具体的には、ユーザーが Google マップの地図から自分の場所を選択できるウィジェットを作成しました。このウィジェットはオンデマンドで表示され、配置されたページの 10 回に 1 回使用される可能性があります。このウィジェット (Google マップ js API) の依存関係を読み込む最も簡単な方法は、ページにスクリプト タグを配置することです。ただし、これにより、ブラウザーはすべてのページの読み込みでそのスクリプトを要求します。ユーザーがウィジェットを表示する必要がある場合にのみ、そのスクリプトをブラウザに要求させる方法を探しています。
6 に答える
function loadJSInclude(scriptPath, callback)
{
var scriptNode = document.createElement('SCRIPT');
scriptNode.type = 'text/javascript';
scriptNode.src = scriptPath;
var headNode = document.getElementsByTagName('HEAD');
if (headNode[0] != null)
headNode[0].appendChild(scriptNode);
if (callback != null)
{
scriptNode.onreadystagechange = callback;
scriptNode.onload = callback;
}
}
そして使用するには(例としてswfObjectを使用しました):
var callbackMethod = function ()
{
// Code to do after loading swfObject
}
// Include SWFObject if its needed
if (typeof(SWFObject) == 'undefined')
loadJSInclude('/js/swfObject.js', callbackMethod);
else
callbackMethod();
不動産サイトで実際のDEMOをご覧になることをお勧めします。
デモ ページで、リンク [Xem bản đồ] をクリックするだけで、オンデマンドでロードされるマップを確認できます。ページの読み込み時ではなく、リンクをクリックしたときにのみマップが読み込まれるため、ページのダウンロード時間を短縮できます。
jsloader を参照してください: http://www.jsloader.com/
Gaia Ajax はこれを行います (私はそれを実装したので知っています - 私は最初の創設者です)、それらは GPL です。ですから、彼らがあなたを訴えるのではないかと心配しているのでなければ (彼らは今、私に訴訟を起こそうとしているのです)、彼らがどのようにそれを行っているかを調べてみてください。基本的な技術は、スクリプトが必要なときに DOM を使用してスクリプト タグを挿入することです。ただし、読み込みが完了する前にこのファイル内のものを参照しないように注意する必要があります (これは非同期で行われます)。
その問題の解決策 (1 つの解決策) は、ファイルの末尾に変数を追加し、再帰的な setTimeout 呼び出しを使用して、変数が定義されているかどうかを確認し、読み込みが完了するまでファイルの読み込みに応じてコードの実行を延期することです。 of JS file」変数が定義されています...
ファイル名のハッシュ値をページの非表示フィールドに追加することで、どのファイルが含まれているかを実際に追跡しました。つまり、同じファイルを複数回含めることは決してありませんでした...
実際かなり気の利いた...
Google AJAX API は、Google の JavaScript API の動的読み込みを提供します。ドキュメントにMaps JS をオンデマンドでロードする例があります。
function mapsLoaded() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}
function loadMaps() {
google.load("maps", "2", {"callback" : mapsLoaded});
}
<script src="...">
タグをDOMツリーに追加することで、スクリプトを動的にロードできます。