发表新帖
发表新帖

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

前端 未结
关注
6 1352
眼角桃花
眼角桃花 2020-12-20 02:36

on a website, I have these lines on the tag
相关标签:
6条回答
  • 悲哀的现实
    2020-12-20 03:06

    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>
    0 讨论(0)
  • 一整个雨季
    2020-12-20 03:08

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

    0 讨论(0)
  • 余生分开走
    2020-12-20 03:09

    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.

    0 讨论(0)
  • 谎友^
    2020-12-20 03:10

    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);
    }
    0 讨论(0)
  • 后悔当初
    2020-12-20 03:10

    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.

    0 讨论(0)
  • 天涯浪人
    2020-12-20 03:16

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题