How to conditionally load file?

Question

Could somebody suggest me a way for loading css or javascript file conditionally i.e only if url is accessible?

for example on my page I have the following files:

<html>
...
<link rel="stylesheet" type="text/css" href="https://service.test/css/a.css"/>
<script type="text/javascript" src="https://services.test/js/a.js"></script>
...
</html>

Is there any way to check if https://service.test/css/a.css is accessible then if yes load this resource (same for https://services.test/js/a.js)?

Does this answer your question? [Conditionally load JavaScript file](https://stackoverflow.com/questions/15521343/conditionally-load-javascript-file) — Anurag Srivastava, Mar 31 '20 at 09:45
Also, you need to make an `XHR` request to the resource you want to check for accessibility — Anurag Srivastava, Mar 31 '20 at 09:47
Also see [How do I check if file exists in jQuery or pure JavaScript](https://stackoverflow.com/questions/3646914/how-do-i-check-if-file-exists-in-jquery-or-pure-javascript). — showdev, Mar 31 '20 at 10:01
Also see working example https://jsfiddle.net/pu3antasyah/v95Loyvu/ — Umar Farooque Khan, Mar 31 '20 at 10:50

score 0 · Answer 1 · answered Mar 31 '20 at 10:01

You could try something like this. but it will only work for the stylesheets that are in head section.

<html>
<link rel="stylesheet" type="text/css" href="https://service.test/css/a.css"/>
<body>

</body>

<script>
// you will have to manuall define the pairs (keys are stylesheets and values are scripts you want to load)
const pairs = {
    "https://service.test/css/a.css": "https://services.test/js/a.js"
}

let styles = document.querySelectorAll("link[rel='stylesheet'][type='text/css'][href]");

styles.forEach(s => {
  if(pairs[s.href]){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = pairs[s.href];    
    document.getElementsByTagName('head')[0].appendChild(script);
  }
});
</script>
</html>

I think the OP wants to check if a file is accessible before loading it. — showdev, Mar 31 '20 at 10:06

How to conditionally load file?

1 Answers1