I'm only seeing this problem in Internet Explorer 11. (Haven't tested IE9 or IE10.)

Using fallback.js version 1.1.1, error occurs on Line 208:

if (stylesheet.rules) {

in function fallback.css.check()

Test page exhibiting the problem (IE11) is here:

http://win-soft.s3.amazonaws.com/public/fallback-test.html

I'm looking to get feedback on the v2 draft.

-- UPDATED -- Track specification and progress via: https://github.com/dolox/fallback/tree/v2

Everyone I tagged here either submitted a bug in the past or was involved somehow in the project. I would love to hear your feedback on this.

Goals:

• Full test suite runner, Mocha + Karma, that will automatically run in all the browsers.
• Short hand code galore, easier for users to implement and a lot faster to code with. Example instead of writing fallback.require you would write req. Instead of fallback.config, simply use conf.
• Ability to be able to explicitly load CSS/IMG/JS files. Saving users from typing file extension such as .css and .js, and letting the library automatically add them, saving on excess code. Prefixes css files with css! and image files with img!. Probably fonts as well prefixing with font!. Not sure how I feel about the exclamation mark, I think I like ':" better. Would like to hear what others think.

Example:

fallback.config({
    urls: {
        'img!logo': [
            '//www.amazoncdn.com/logo.png',
            '//www.amazoncdn.com/logo2.png'
        ],

        'css!bootstrap': [
            '//www.bootstrapcdn.com/bootstrap', // .css will automatically be suffixed by the library
            '//www.amazoncdn.com/bootstrap'
        ]
    }
};

fallback.config({
    urls: {
        'img:logo': [
            '//www.amazoncdn.com/logo.png',
            '//www.amazoncdn.com/logo2.png'
        ]
    }
};

fallback.config({
    urls: {
        'img$logo': [
            '//www.amazoncdn.com/logo.png',
            '//www.amazoncdn.com/logo2.png'
        ]
    }
};

Instead of css!bootstrap, maybe possible using:instead. So:css:bootstrap`.

• CLI that directly integrates with Bower. I hope to be able to type from the CLI fallback install angular, and when I go ahead and do that, the CLI would use bower for the install, but then automatically append the library that bower just installed to your Fallback config file so we (the users) don't have to go digging and hand typing our paths. Full automation. You type in the CLI, it automatically adds to your config, your done.
• Comments glare, and ability to turn on debugging which would spit on console messages to better help/guide users.
• RequireJS drop in replacement. Not looking to rewrite the entire RequireJS library, but am looking to expand on some of the good parts of it, all while trying to keep it simple. One of the reasons I wrote this library was because you have to become a RequireJS master (reading the whole docs) just to get it fully working right (or a full understanding), which is exactly what I don't want to happen here. I want to give users the ability to use AMD, but not enforce it. Whether they use it or not, is up to them. I also want to leave using globals as an option that way users are not constrained to using single/multiple minify softwares just to concat their JS libraries. For example, if you're using AMD in the library, window.jQuery would still work, whereas with RequireJS it won't. I was using RequireJS with a project, and I wound up wasting hours trying to fix the project to work right with concatenating and minifying files with their r.js library, because I had no choice but to use their r.js library. I did a lot of googling on that matter, I know I'm not alone in that complicated mess of confusion.
• Easier way for members to contribute by specifying guidelines. https://github.com/rwaldron/idiomatic.js/
• Small add-on migration libraries for fallback v1.0, and another for RequireJS.

The following code loads BOTH css files instead of just the first that successfully loads

'normalize': [
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.3/normalize.min.css', 
    'css/third-party/normalize-2.1.3.min.css'
]

If it helps i've included a screenshot of the chrome devtools network panel

As you can see both files are loaded

If this was the intended behavior then how would I go about doing this myself?

Hi, I'd like to use fallback.js - unfortunately, I do think that most files that I'm referencing do not create a window variable - for example, angular dependencies or jquery plugins:

http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-animate.js

Is there any way to use the fallback with them?

Thanks!

Also, one last piece. Not that I haven't already been annoying enough with all of my issue updates here... :) I only mention this here because it took me a while to figure out what you were talking about when you mention "shimming".

Like your reference in the fallback.js documentation to the word's definition states, a "shim" is essentially "a small piece of something that allows a much larger something to work appropriately". A great example of this is the html5 shim for versions of IE prior to 9. This shim can be used by including

<script type='text/javascript' src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

in the html of a page. It allows html5 elements to work better on legacy IE browsers. Thus, it's a small piece (file) that allows a larger something (html5) to work appropriately.

The "shims" that you are defining are really "dependencies". One file (js or css) is dependent upon, or must be loaded before, another file.

Loading a CSS file like this causes the resource to be loaded as a script, as it doesn't end in ".css"

fallback.load({
      roboto_slab_css : [ '//fonts.googleapis.com/css?family=Roboto+Slab' ],
      //etc

The workaround is something like this:

fallback.load({
      roboto_slab_css : [ '//fonts.googleapis.com/css?family=Roboto+Slab&.css' ],
      //etc

The problem is specifically with the fallback.ready() function when the [libraries] array is NOT passed.

fallback.ready(function() {
    // All of my libraries have finished loading!
    // IE10 will execute this code before all libraries have been loaded
    // Execute my code that applies to all of my libraries here!
});

Works as expected in IE11, FF & Chrome. Problem was tested in both a real IE10 install as well as using IE11 Debugger with IE10 emulation enabled.

Hi,

I am trying to load different js libs from CDN, out of which jQuery and Angular are loading up fine but others including underscore, moment, highcharts, highcharts-ng are just not loading up. Here is what I have :

fallback.load({
jQuery: [ '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PURPOSE.min.js', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'
], angular: [ '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js' ], //highcharts: [ // '//code.highcharts.com/highcharts.js' //], //'highcharts-ng': [ // '//rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js' //], underscore: [ '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js' ]//, //moment: [ // '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js' //], //'loading-bar': [ // '//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js' //],

}, { // Shim different libs so that it will only load after jQuery has completed! shim: { //'underscore' : ['jQuery'] //'highcharts': ['jQuery'], //'highcharts-ng': ['angular'], //'loading-bar': ['angular'] },

callback: function (success, failed) {
    // success - object containing all libraries that loaded successfully.
    // failed - object containing all libraries that failed to load.
    console.debug('those which loaded');
    console.debug(success);
    console.debug('those which failed');
    console.debug(failed);
    alert('Success');
    // All of my libraries have finished loading!

    // Execute my code that applies to all of my libraries here!
}

});

fallback.ready(function () { // All of my libraries have finished loading!

console.debug($);
console.debug(angular);
console.debug(underscore);
// Execute my code that applies to all of my libraries here!

});

In fallback.ready, underscore stays as undefined, while jQuery and Angular does show version detail. Any help?

Hi,

I’m getting the following error in IE8:

'shim' is null or not an object (fallback.js, line 142, character 4)

The line is question is:

if (!me.is_object(options.shim)) {

Any idea how to fix this?

Thanks,

Dylan

One nice feature of require.js is that it supports "lazy loading" libraries. That is, it can avoid loading libraries that are not needed.

Here's my own use-case for it, and how I think it might be designed and implemented here.

We use both jQuery and jQuery-UI on our site, and jQuery UI is large enough that we would prefer not to load it on pages where we don't need it.

With the current design, I could address this by creating two small scripts:

# Set up definition to load jQuery with fall back
load-jquery.js

# Set up definition to load jQuery with fall back
load-jquery-and-jquery-ui.js

I would then load whichever one I needed, and find-and-replace my jQuery "ready" commands to this instead:

fallback.ready(function() {
    // Completed
});

The way I would rather use fallback.js to put all my CDN and fallback references in one file, and then I would just declare which ones I needed on a given page, and just those would be loaded.

Here's how that might look:

# My local script which calls fallback.load()
cdn-fallbacks.js

Then, I would replace the jQuery ready() calls depending on which ones I wanted to load:

# Load everything by default (current behavior)
fallback.ready(function() {
    // Completed
});

# explicitly load just jQuery
fallback.ready(['jQuery'],function() {
    // Completed
});

# explicitly load just jQuery and jQuery-UI
fallback.ready(['jQuery','jQuery-UI'],function() {
    // Completed
});

In the implementation, the call to "this.initialize();" would be moved from "load()" to "ready()" and would take as argument the optional array that can now be passed to ready(). If the list has entries in it, only those elements would be loaded. The call to initialize(); run immediately when ready() is called (after the callbacks are setup).

require.js supports basically the same feature with the same syntax, and I assume it's implemented in a similar way.

Without this feature, I could end up with a proliferation of files related to fallback.js, that each load different combinations of modules. Or more likely, I might consider switchng to using require.js rather than deal with the lack of missing feature.

Thanks for your consideration.

Mark

I watched the related network activity of example.html using Chrome inspector.

I was surprised to see that it loads jQuery from the Google CDN twice instead once (not counting the intentional initial failure to a different URL).

The first request returns 200, the next 304 Not Modified.

jQuery-UI is also fetched twice from the same URL instead of once.

This appears to be a bug.

Edge isn't loading CSS fallbacks correctly. This is a bug which got introduced in v1.1.6.

In line 502 to 505, instead of:

// Needed for IE11 especially. `onload` is fired even when there's a 404 for `link` elements.
if (type !== 'js' && !me.css.check(library) && Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject) {
    return me.spawn.failed(payload);
}

It should be:

if (type !== 'js' && !me.css.check(library)) {
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if (!isIE)
        return me.spawn.failed(payload);
    // Needed for IE11 especially. `onload` is fired even when there's a 404 for `link` elements.
    else if (Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject)
        return me.spawn.failed(payload);
}

Hello there, I'm trying to use fallback.js to load bluebird.js, but since bluebird doesn't add any window alias, how am I supposed to prevent twice loading?

Below is an example of how I've achieved this, but it's a hack so I'm trying to find a correct way to do this.

<script src="{% static 'assets/js/fallback.min.js' %}"></script>
<script>
fallback.load({
    'Vue': [
        '//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
        '{% static "assets/js/vue.min.js" %}'
    ],
    'VueResource': [
        '//cdn.jsdelivr.net/npm/[email protected]/dist/vue-resource.min.js',
        '{% static "assets/js/vue-resource.min.js" %}'
    ],
    'Cookies': [
        '//cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js',
        '{% static "assets/js/js.cookie.min.js" %}'
    ],
    'Object.hasOwnProperty.call((new Promise(function() {})), "_promise0")': [
        '//cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.min.js',
        '{% static "assets/js/bluebird.min.js" %}'
    ],
}, {
    shim: {}
});
</script>

added timeout function

If a requested script cannot be loaded successfully within timeout span, fallback automatically tries to load from the next fallback url (without interrupting the original download). First successful download for each library wins.

Use case for this is a slow responding network, in my case a proxy server which took 60s to return the error code, thus taking my page (with a couple of included scripts and fallback scripts) more than four minutes to load! Now with timeout function it is down to less than 20 seconds.

Currently timeout is set to five seconds. For v2 of fallback this parameter could be made configurable.

As of the recent changes from chrome https://chromium.googlesource.com/chromium/src/+/a4ebe08c91e29140e700c7bae9b94f27a786d1ca (more detail information: https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760) so even the css is loaded from cdn, the check of css exports always failed. an "origin-clean" (see https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-origin-clean-flag) attribute should be added to the element to make the check works on latest Chrome browser.

Hi As I used the library as explained but my files are being loaded twice, here is the code: fallback.load({ BSCSS:['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', 'assets/css/bootstrap.min.css'], jQuery: [ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js', '/assets/js/jquery.min.js'], BSJS:['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', //'assets/js/bootstrap337/bootstrap.min.js'], 'jQuery.ui': [ '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js', '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js', '/assets/js/jquery-ui.min.js'], page_css: ['/subsites/oxtedgasholder/assets/css/main.css?v=1.85'], 'jQuery.validate':['/assets/js/jquery.validate.min.js'], formValidation:'/assets/js/planningsites/formValidation.js?v=1.85', sitejs: ['/subsites/oxtedgasholder/assets/js/site.js?v=1.85'], }, { // Shim jQuery UI so that it will only load after jQuery has completed! shim: { 'BSJS': ['jQuery'], 'jQuery.ui': ['jQuery'], jQuery.validate': ['jQuery'], 'formValidation':['jQuery'], 'sitejs': 'formValidation' },

	callback: function(success, failed) {
		// success - object containing all libraries that loaded successfully.
		// failed - object containing all libraries that failed to load.
						
		// All of my libraries have finished loading!
		// Execute my code that applies to all of my libraries here!
						
		}
});
			
fallback.ready(['jQuery'], function() {
	// jQuery Finished Loading
					
	// Execute my jQuery dependent code here!
});
			
fallback.ready(function() {
	// All of my libraries have finished loading!
			
	// Execute my code that applies to all of my libraries here!
});

HERE is the output copied from browser network tab Please let me know, if I am doing anything wrong. Thanks in advance. Philip