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

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

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>

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);
    }

Kodejuice

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>

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.

<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>

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.

来源：https://stackoverflow.com/questions/31848465/how-to-load-or-not-a-js-script-into-the-head-section-based-on-screen-resolutio

标签

javascript

adaptive-layout