2

ウェブサイトでは、タグにこれらの行があります

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

しかし、それは機能していません

前もって感謝します

4

6 に答える 6

8

スクリプト タグをこのスクリプト タグに置き換えます。これにより、ウィンドウ幅が一定量より大きい場合にのみ、他の 3 つのスクリプト タグが作成されます。

この回答は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>
于 2015-08-06T06:49:11.140 に答える
4

あなたのスクリプトで

 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);
    }
于 2015-08-06T06:43:16.457 に答える
2

このようなことを試してください：

<!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>
于 2015-08-06T06:48:43.467 に答える
0

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

于 2015-08-06T06:41:08.083 に答える
0

非同期 (動的) 読み込みスクリプトについて読むことができます。ロードする前に、解像度を確認し、必要なスクリプトをロードできます。

サーバー側でスクリプトのリストをフィルタリングし (モバイル デバイスのヘッダーをチェック)、必要なスクリプトのみをヘッダーに含めることができます。

于 2015-08-06T06:41:54.013 に答える