Fancybox script fails if load with getScript

Question

I have to create a webshop that can be integrated into any external webpage. (Like Ecwid.) To do this, I have to create an array, where I list the scripts name, that have to be included/executed. In that list, there is fancybox, like other plugins. Other plugins can be loaded with getScript function, but fancybox stops all the running scripts without any errors. Don't know why, and what to do. Please help in this. Thanks

engineConfig = new Array(
    '/jquery.ui.js',
    '/fancybox.js',
    '/modernizr.js',
    '/lightbox.js',
    '/tinyscrollbar.js',
    '/base64.js',
    '/md5.js'
);


function includeEngineParts() {
    if(engineConfig.length > 0) {
        // global variables...
        var src = strShopApiEngineDomain+strShopApiEngineGuiPath+sep+ext+engineConfig[0]+shopApiLoadRnd;
        engineConfig.shift();
        $.getScript(src, function(){
            includeEngineParts();
        });
    } else {
        doSomething();
    }
}

Answer 1

Accodring to the jQuery Documentation, the $.getScript() function is a shorthand for the following AJAX call:

$.ajax({
    url: url,
    dataType: "script",
    success: success
});

Because of this, if any of the files in the array fail to load, the success callback won't trigger the load of the next file. There are 3 ways to get around this.

1. First of all, try fixing the error that is preventing the script from continuing execution. This, however is not a final solution, since these errors may happen anytime, and you don't want your code breaking, do you?

2. You could leave everything as-is, and instead of using the callback function to trigger a recursive call, you can call the function directly after the script loading process is initiated. The only downside is that JS will not wait for the script to load before loading the next one. So, replace:

   $.getScript(src, function(){
       includeEngineParts();
   });
   

   With:

   $.getScript(src);
   includeEngineParts();
   

3. Use an ajax call in place of your $.getScript() with the property complete, which is always executed after a request is finished regardless of the fact if it was successful or not. This way we can ensure that the scripts load in the same order, one after the other, if they load at all, that is.

   $.ajax({
       url: src,
       dataType: "script",
       complete: includeEngineParts
   });