lock browser while loading external scripts

Question

I'm loading external javascript using jquery $.getScript(url, callback), what I want to achieve is to lock the browser untill the script is loaded, I've tried using $.ajax instead whith async: false but with no better results

did you actually use `asyn`? Or is that typo only in this question? Because it should be `async`. — forgivenson, Dec 23 '14 at 16:18
You can't "lock the browser". If you want to *try* to prevent your users from doing stuff, display an inert overlay over the page while the script is loading. — Jon, Dec 23 '14 at 16:22
"lock the browser" so no js is executed till the new script(s) is/are loaded — MaK, Dec 23 '14 at 16:22
no the idea is not the prevent users from doing stuff, i'm loading two jquery versions, and i want to lock the browser untill the new lib is loaded and noconflict executed so the already loaded plugins with the old lib won't throw js errors (actually i'm having a thrown error due to easing plugin loaded to the old jquery lib) — MaK, Dec 23 '14 at 16:28
@ManiaKastor: So you want to suspend JavaScript execution? Forget about it, not possible. — Jon, Dec 23 '14 at 16:35
Try utilizing `$.holdReady()` See https://api.jquery.com/jQuery.holdReady/ , http://stackoverflow.com/a/24599373/2801559 ; see also http://stackoverflow.com/questions/26124199/run-custom-code-after-jquery-has-been-loaded-via-modernizr/26127636#26127636 — guest271314, Dec 23 '14 at 16:37
*"no the idea is not the prevent users from doing stuff, i'm loading two jquery versions, and i want to lock the browser untill the new lib is loaded and noconflict executed so the already loaded plugins with the old lib won't throw js errors"* locking the browser prevents the user from doing stuff... — Kevin B, Dec 23 '14 at 16:57
@guest271314 the $.holdReady did the trick please put this on an answer so I can check it as the accepted answer; many thx saved me from extra work hours :) — MaK, Dec 23 '14 at 17:16

score 2 · Accepted Answer · answered Dec 24 '14 at 00:45

Try utilizing $.holdReady()

$.holdReady(true);

var data;

function callback(response) {
   if (response) {
   data = response;
   $.holdReady(false)
   };
};

var request = $.getScript(url);

$(document).ready(function() {
  $("body").append(data.result)
});

$.holdReady(true);

var data;

function callback(response) {
   if (response) {
   data = response;
   $.holdReady(false)
   };
};

var request = $.getScript("https://gist.githubusercontent.com/guest271314/e2edd364cc20ad7e9e14/raw/f7d7b756005ad6d2b88cf0211f78a2990d7d2dc7/content.json");

$(document).ready(function() {
  $("body").append(data.result)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

score 0 · Answer 2 · answered Dec 23 '14 at 16:28

Take a look at http://requirejs.org/. I've found it to be extremely useful and practical for application script dependencies.

Sounds like you need a script to load / run before something else happens. This is exactly what requireJS can be used to do!

score 0 · Answer 3 · answered Dec 23 '14 at 16:36

0

There's another alternative to achieve this :

function get_external_script(url){
    var settings = {
        async : false,
    };
    $.ajax(url,settings);
}

You can use this function to load external JavaScript, and this will execute it as well.

answered Dec 23 '14 at 16:36

Rosmarine Popcorn

10,761
11
59
89

score 0 · Answer 4 · answered Dec 23 '14 at 17:00

$.getScript creates a <script> tag and appends it to the <head> and therefore can't be synchronous. Instead, you'll have to use $.ajax, and then eval the returned javascript.

$.ajax({
    url: 'somescript.js',
    async: false,
    dataType: 'text',
    success: function (script) {
        eval(script);
    }
});

That said, this is probably entirely the wrong way to solve whatever problem you are trying to solve.

lock browser while loading external scripts

4 Answers4