Search code examples
javascriptcsshtmlfallback

script & link tags fallback

How do you include your libs into your projects? Do you use fallback?

for now i'am using my own (i think now the best variant) fallback

function onErrorLoader(obj, link){
    if(obj.tagName != "SCRIPT")
        obj.href = link;
    else
        obj.src = link;
}

and i use it like this

First i include my error handler in my html <script src="js/onErrorLoader.js"></script>

next to this i can call my libs like this

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" onerror="onErrorLoader(this, 'vendor/bootstrap/dist/css/bootstrap.css')">

JS

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"  onerror="onErrorLoader(this, 'vendor/bootstrap/dist/js/bootstrap.js')"></script>

What do you think about this? What you can advice for make it better, or maybe you know much better way to do this

All this just in case CDN does not reply

For example: I am using my scripts from my own CDN, but in some reasons my CDN does not reply

Solution

  • I've never seen this done. I believe that is because it is unnecessary. I've never seen a scenario where my styles or scripts just, didn't load. Even back when I may have had 12 scripts loaded in the head. The browser just doesn't forget to load the assets.

    Most modern workflows have preprocessing and concatenation and then they serve 2 or 3 files. People use task-runners and build tools like grunt, gulp, brunch, broccoli, codekit etc.

    My advice would be to just let the browser load the files and not to worry about it, or if you really want to be SURE something happens / look up "promises"