How to load or not a JS script (into the head section) based on screen resolution?

Question

on a website, I have these lines on the tag

  <script type="text/javascript" src="http://www.domain.com/js/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.domain.com/js/jquery.colorbox.min.js"></script>
  <script type="text/javascript" src="http://www.domain.com/js/inner-code-colorbox.min.js"></script>

Which are loading JS code, that shouldn't be loaded at all on portable systems

Is there a way to do it?

I tried in this way:

  <script type="text/javascript" media="only screen and (min-width: 950px)" src="http://www.domain.com/js/jquery.min.js"></script>

But it's not working

Thank you in advance

possible duplicate of [Conditionally load JavaScript file](http://stackoverflow.com/questions/15521343/conditionally-load-javascript-file) — Singular1ty, Aug 06 '15 at 06:41
possible duplicate of [Call external JS file based on "media screen" value](http://stackoverflow.com/questions/15823137/call-external-js-file-based-on-media-screen-value) — rahimv, Aug 06 '15 at 06:46

Maximillian Laumeister · Accepted Answer · 2015-08-06T07:01:22.900

Replace your script tags with this script tag, which will create the other three script tags ONLY of the window width is larger than a certain amount.

This answer does not rely on jQuery, so you can use it to determine whether you want to load jQuery.

<script>
    if (window.innerWidth > 500) {
        var head = document.getElementsByTagName('head')[0];

        var s1 = document.createElement("script");
        s1.type = "text/javascript";
        s1.src = "http://www.domain.com/js/jquery.min.js";
        head.appendChild(s1);

        var s2 = document.createElement("script");
        s2.type = "text/javascript";
        s2.src = "http://www.domain.com/js/jquery.colorbox.min.js";
        head.appendChild(s2);

        var s3 = document.createElement("script");
        s3.type = "text/javascript";
        s3.src = "http://www.domain.com/js/inner-code-colorbox.min.js";
        head.appendChild(s3);
    }
</script>

Thank you so much. Indeed the script above worked perfectly I thank also all the other friends for their suggestions. I implemented this last script just because it was fully complete for my purposes. Grazie :) — Tormy Van Cool, Aug 06 '15 at 08:02

Amila Iddamalgoda · Answer 2 · 2015-08-06T07:08:34.097

4

In your script

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
 var head = document.getElementsByTagName('head').item(0);
 if(width > 950){
       var script = document.createElement("script");
       script.type = "text/javascript";
       script.src = "http://www.domain.com/js/jquery.min.js";
       head.appendChild(script);
    }

edited Aug 06 '15 at 07:08

answered Aug 06 '15 at 06:43

Amila Iddamalgoda

4,166
11
46
85

score 2 · Answer 3 · edited Aug 06 '15 at 07:05

2

Try something like this :

<!DOCTYPE html>
<html>
   <head>
      <script id="waiting"></script>
   </head>
   <body>
      <script>
         (function(){
          if(screen.width > 800) 
             //checks if the screens width is greater than 800
             document.querySelector("#waiting").setAttribute("src", "URL HERE");
         }());
      </script>
   </body>
</html>

edited Aug 06 '15 at 07:05

mehmetseckin

3,061
1
31
43

answered Aug 06 '15 at 06:48

Kodejuice

21
2

Or you could also try Ajax Requests to load the script file and execute them with the"eval" function – Kodejuice Aug 06 '15 at 06:50

Sapikelio · Answer 4 · 2015-08-06T06:51:46.257

1

Check on Javascript your screen width and then append your script like this.

if(window.innerWidth > 950){
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://www.domain.com/js/jquery.min.js";
    $("head").append(s);
}

I hope it helps.

edited Aug 06 '15 at 06:51

answered Aug 06 '15 at 06:45

Sapikelio

2,594
2
16
40

And.. What my is code doing? Ir checks width and if it's larger than thats amount jquery is loaded.... – Sapikelio Aug 06 '15 at 06:49
OK. You're right, I've edited my answer to make it works properly. Thanks – Sapikelio Aug 06 '15 at 06:52

score 0 · Answer 5 · answered Aug 06 '15 at 06:41

<script> tags don't support the media attribute. You can check the screen resolution with JS and then dynamically inject a script tag if needed. Unlike CSS which can add or remove rulesets based on the current resolution, note the script either runs or not, so if you need some code to change based on current screen dimensions, add checks in the code itself.

<script>
  if (window.innerWidth >= 950) {
    var script = document.createElement('script');
    script.src = 'http://www.domain.com/js/jquery.min.js';
    document.getElementsByTagName('script')[0].insertBefore(script);
  }
</script>

score 0 · Answer 6 · answered Aug 06 '15 at 06:41

0

You can read about async (dynamic) loading scripts. Before load you can check resolution and load needed scripts.

You can filter list of scripts on the server side (check headers for mobile devices) and include in header only needed scripts.

answered Aug 06 '15 at 06:41

steppefox

1,784
2
14
19

How to load or not a JS script (into the head section) based on screen resolution?

6 Answers6

Linked