jQueryがロードされましたか？カラーボックスが利用できますか？ $ .getScriptを経由して、いくつかのjsファイルは常にWebサーバからダウンロードしているの呼び出し？

Question

私は動的に_tumIsler.js（_allStuff.js）とJSファイルをロードしています。

<script src="../js/_tumJsler.js" type="text/javascript"></script>

これは含まれています：

// url=> http:  +  //  + localhost:4399  + /yabant/
//       ----     ----   --------------    --------
//     protocol + "//" +     host        + '/virtualDirectory/'
var baseUrl = document.location.protocol + "//" + document.location.host + '/yabant/';

// If there is "~/" at the begining of url, replace it with baseUrl
function ResolveUrl(url) {
    if (url.indexOf("~/") == 0) {
        url = baseUrl + url.substring(2);
    }
    return url;
}

// Attaching scripts to any tag
function addJavascript(jsname, pos) {
    var th = document.getElementsByTagName(pos)[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', jsname);
    th.appendChild(s);
}

// I want to make sure jQuery is loaded?
addJavascript(ResolveUrl('~/js/1_jquery-1.4.2.min.js'), 'head');

var loaded = false; // assume it didn't first and if it is change it to true
function fControl() {
    // alert("JQUERY is loaded?");
    if (typeof jQuery == 'undefined') {
        loaded = false;
        fTry2LoadJquery();
    } else {
        loaded = true;
        fGetOtherScripts();
    }
}

// Check is jQuery loaded 
fControl();

function fTry2LoadJquery() {
    // alert("JQUERY didn't load! Trying to reload...");
    if (loaded == false) {
        setTimeout("fControl()", 1000);
    } else {
        return;
    }
}

function getJavascript(jsname, pos) {
    // I want to retrieve every script one by one
    $.ajaxSetup({ async: false,

        beforeSend: function() {
            $.ajaxSetup({
                async: false,
                cache: true
            });
        },
        complete: function() {
            $.ajaxSetup({
                async: false,
                cache: true
            });
        },
        success: function() {
            //
        }
    });

    $.getScript(ResolveUrl(jsname), function() { /* ok! */ });
}

function fGetOtherScripts() {
    // alert("Other js files will be load in this function");

    getJavascript(ResolveUrl('~/js/5_json_parse.js'), 'head');
    getJavascript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), 'head');
    getJavascript(ResolveUrl('~/js/4_AjaxErrorHandling.js'), 'head');
    getJavascript(ResolveUrl('~/js/6_jsSiniflar.js'), 'head');

    getJavascript(ResolveUrl('~/js/yabanYeni.js'), 'head');
    getJavascript(ResolveUrl('~/js/7_ResimBul.js'), 'head');
    getJavascript(ResolveUrl('~/js/8_HaberEkle.js'), 'head');
    getJavascript(ResolveUrl('~/js/9_etiketIslemleri.js'), 'head');
    getJavascript(ResolveUrl('~/js/bugun.js'), 'head');
    getJavascript(ResolveUrl('~/js/yaban.js'), 'head');
    getJavascript(ResolveUrl('~/embed/bitgravity/functions.js'), 'head');
}

これらすべてのjsファイルがロードされた後、

、この行は「btnResimYukle」であるIDボタンをクリックしたときに、ページ内のUploadFileページを表示するために実行されます。

<script type="text/javascript">
    if (jQuery().colorbox) {
        alert("colorbox exists");
    } else {
        alert("colorbox doesn't exist");

        $.ajaxSetup({
            cache: true,
            async: false
        });

        $.getScript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), function() {
            alert("Loaded ! ");

            $('#btnResimYukle').live('click', function() {
                $.fn.colorbox({ iframe: true, width: 700, height: 600, href: ResolveUrl('~/Yonetim/DosyaYukle.aspx') });
                return false;
            });
        });
    }
</script>

まず私は、私は常に$ .getScript機能をJSファイルを呼び出しています、あなたは非常に良い人をお願いしたいと思います。彼らは常に、すべての$ .getScriptリクエストにダウンロードされていますか？そして、その答え「はい」ならば、どのように私はそれを防ぐことができますか？この作業は行います：

$.ajaxSetup({
    cache: true,
    async: false
});

私はF5またはCtrl + F5キーを押すと、

第二に、私はいつもこのエラーを取得しています：

しかし、私は、URLにEnterキーを押したときに、エラーがない：S

Answer 1

あなたのロードスクリプトは、彼らが後でDOMの順序で処理されるhead要素にスクリプトを追加しています。彼らはので、あなたのhead要素内にインラインスクリプトの後にロードされていることを、この手段は、もちろん、あなたが取得し、そのオブジェクトは、エラーが予想される：jQueryのは、まだ定義されています。ドキュメントの本体セクションの終わりに、あなたのインラインスクリプトを含む、およびスクリプトの残りの部分を動かす - 実行するために、あなたのインラインスクリプトのために必要なものを - より良いアプローチは、ヘッダ内の唯一の絶対に必要なスクリプトをロードすることです。文書要素のすべてこの方法では、まだあなたのページのロードを高速化、並行して読み込むことができます。

あなたがこれを行う場合、私は非同期的にスクリプトをロードしないことをお勧めします。あなたが同期それらをロードした場合、あなたは文書の最後にそれらの多くを動かすことができることがわかります。さらに、ロード時間を短縮することができます限りのスクリプトを組み合わせています。