Как загрузить или нет скрипт JS (в раздел head) в зависимости от разрешения экрана?

На сайте у меня есть эти строки на теге

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

Которые загружают код JS, который вообще не должен загружаться на портативных системах

Есть ли способ сделать это?

Я пытался таким образом:

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

Но это не работает

заранее спасибо

Источник

6 ответов

Решение

Замените ваши теги сценариев этим тегом сценария, который создаст остальные три тега сценария ТОЛЬКО из ширины окна, превышающей определенную величину.

Этот ответ не зависит от jQuery, поэтому вы можете использовать его, чтобы определить, хотите ли вы загрузить 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>
Источник

В вашем скрипте

 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);
    }
Источник

Попробуйте что-то вроде этого:

<!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>
Источник

Проверьте на Javascript ширину вашего экрана, а затем добавьте ваш скрипт следующим образом.

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

Я надеюсь, что это помогает.

Источник

<script> теги не поддерживают media приписывать. Вы можете проверить разрешение экрана с помощью JS, а затем динамически добавить тег сценария, если это необходимо. В отличие от CSS, который может добавлять или удалять наборы правил на основе текущего разрешения, обратите внимание, что скрипт выполняется или нет, поэтому, если вам нужно изменить код на основе текущих размеров экрана, добавьте проверки в сам код.

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

Источник

Вы можете прочитать об асинхронных (динамических) скриптах загрузки. Перед загрузкой вы можете проверить разрешение и загрузить необходимые скрипты.

Вы можете отфильтровать список скриптов на стороне сервера (проверить заголовки для мобильных устройств) и включить в заголовок только необходимые скрипты.

Источник
Другие вопросы по тегам