1

最終的に(ファッションの)反応するサイトを持っています。私が今やってみたいのは、モバイルデバイスに読み込まれているスクリプトを減らして読み込みを高速化することです。スクリプトは携帯電話では重複しているため、開始するのに適しているようです。レスポンシブデザイン - 特定のスクリプトをロードしないでください。

デバイスによっては、特定のスクリプトのみを読み込む方法はありますか?

このサイトはサードパーティの電子商取引サイトであり、異なるデバイス用の異なるバージョンのページを許可していません。サーバー側の言語は進歩の電子スクリプトです(そのうちの何もわかりません)。

ご協力いただければ幸いです。

+0

条件付き読み込みとは別に、 urのJavaScriptファイル。私は[Chirpy](http://chirpy.codeplex.com/)がいいと聞いています。 – jhsowter

+1

またはGoogleのクロージャーコンパイラ:http://closure-compiler.appspot.com/home –

+0

@jhsowter - javascriptファイルはすでに縮小されていますが、Chirpyを教えてくれてありがとう - 間違いなくasp.netイントラネット私たちが持っているサイト。 – CYMR0

答えて

1

Modernizrは、特徴検出を行い、条件付きでリソースをロードすることができます。あなたが自分自身を展開しない限り、このようなことは多かれ少なかれ標準です。

+0

ありがとう! Modernizrが理想的ですね。 – CYMR0

1

JavaScriptを使用して他のJavaScriptとのリンクを試みたり、ユーザーが使用しているブラウザのチェックを入れることができます。

このページでは、私はあなたが探していると考えているものです動的スクリプトのロードに関するいくつかの情報を持っていますhttp://unixpapa.com/js/dyna.html

+0

提案していただきありがとうございます。 Modernizrは、それが仕事をするだけでなく、もっとHTML5を実装できるように見えるので、論理的な選択と思われます。 – CYMR0

1

これらのスクリプトファイルがどのくらいありますか?モバイルデバイスでは、ページの下部にロードされている限り、半分以下のメガバイトについては心配する必要はありません。

そうでない場合は、サーバーサイドソリューションは、おそらく最もよく動作します:

How do I determine whether it's a mobile device with PHP?

+0

私は彼らがそれほど大きいとは思わないが、Wi-Fi/3Gではなくモバイル体験を遅くするのに十分な大きさだ。ライブチャットなどのサードパーティスクリプトがあります。サーバー側は理想的ですが、PHPを使用することはできません。 – CYMR0

0

は、あなたがこのような3列のデスクトップのレイアウトを持っていると仮定します。

<body> 
    <div id="ad-1"> 
    //javascript1 goes here 
    </div> 
    <div id="content"> 
    //content goes here 
    </div> 
    <div id="ad-2"> 
    //javscript2 goes here 
    </div> 
</body> 

そして、あなたがそのようなことを応答サイト作成したと仮定:あなたがロードしたくない

@media screen and (max-width: 1024px) { 
    #ad-1{ display: none; } 
} 
@media screen and (max-width: 768px) { 
    #ad-2{ display: none; } 
} 

をスクリプトが表示されていない場合はそれを解決する方法があります:

var ResponsiveScriptsLoader = { 

onAdsReady: function() { 
    console.log('success'); 
}, 

addScripts: function(scripts, callback) { 
    for (var i = 0; i < scripts.ads.length; i++) { 
    this.include(scripts.ads[i].src, scripts.ads[i].selectorID); 
    if(i==scripts.ads.length-1) callback(); 
    } 
}, 

include: function(what, where) { 
    var deferred = new $.Deferred(), place; 
    var e = document.createElement('script'); 
    e.onload = function() { deferred.resolve(); }; 
    e.src = what; 
    place = document.getElementById(where); 
    if(place) { 
     place.appendChild(e); 
    } 
    return deferred.promise(); 
}, 

init: function(){ 
if(screen.width > 768){ 
    if(screen.width > 1024){ 
     this.addScripts({ 
     ads: [ 
     { 
      src: "http://ads.script1.js", 
      selectorID: "ad-1" 
     }, 
     { 
      src: "http://ads.script2.js", 
      selectorID: "ad-2" 
     } 
     ]}, this.onAdsReady); 
    } else{ // Screen size is between 769 and 1023 
     this.addScripts({ 
     ads: [ 
     { 
      src: "http://ads.script2.js", 
      selectorID: "ad-2" 
     } 
     ]}, this.onAdsReady); 
     } 
    } 
} 
} 

ResponsiveScriptsLoader.init(); 
関連する問題