響應式設計 - 如何不加載某些腳本？

終於有一個響應網站工作（時尚）。我現在想要做的是減少在移動設備上加載的腳本，以便加載速度更快。手機上的腳本是多餘的，所以它似乎是一個開始的好地方。響應式設計 - 如何不加載某些腳本？

有沒有一種方法僅根據設備加載某些腳本？

該網站是第三方電子商務網站，不允許不同版本的網頁適用於不同的設備。服務器端語言是進步'電子腳本（我什麼都不知道）。

任何幫助將不勝感激！

來源

2012-02-06 CYMR0

除了條件加載，你可以縮小喲你的JavaScript文件。我聽到[Chirpy]（http://chirpy.codeplex.com/）很好。 – jhsowter 2012-02-06 22:54:29

或谷歌的封閉編譯器：http://closure-compiler.appspot.com/home – 2012-02-06 23:52:53

@jhsowter - JavaScript文件已被縮小，但感謝指向我Chirpy - 絕對要看看這個爲asp.net內聯網我們擁有的網站。 – CYMR0 2012-02-07 12:58:31

Modernizr做特徵檢測和可以有條件地加載資源。除非你推出自己的產品，否則這種產品或多或少是標準的。

來源

2012-02-06 23:07:56 ggozad

謝謝！看起來Modernizr是理想的。 – CYMR0 2012-02-07 12:43:14

您可以隨時嘗試使用JavaScript鏈接到其他JavaScript，幷包括檢查用戶正在使用哪個瀏覽器。

此頁面有關於動態腳本加載一些信息，這是什麼，我相信你正在尋找：http://unixpapa.com/js/dyna.html

來源

2012-02-06 22:51:32 dpk2442

感謝您的建議。 Modernizr看起來好像可以完成這項工作，並允許我實現更多的HTML5，所以它看起來是合乎邏輯的選擇。 – CYMR0 2012-02-07 12:53:25

有多大，這些腳本文件？你不需要擔心移動設備上的任何事情少於半個兆字節（只要它們裝載在頁面的底部）。

否則，服務器片面的解決方案可能會最好：

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

來源

2012-02-06 22:54:02

我不認爲它們那麼大，但它們足夠大，在不使用wifi/3G時會減慢移動體驗。我們有用於實時聊天和其他一些事情的第三方腳本。服務器端將是理想的，但不能使用PHP - 在其上工作。 – CYMR0 2012-02-07 12:46:07

假設你有一個三列的桌面佈局是這樣的：

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

來源

2014-01-23 20:33:49 bradbarbin

響應式設計 - 如何不加載某些腳本？

回答

相關問題