1

终于有一个响应式网站工作（时尚）。我现在要做的是减少在移动设备上加载的脚本，以便它们加载得更快。这些脚本在手机上是多余的，因此它似乎是一个不错的起点。

有没有办法根据设备只加载某些脚本？

该网站是第 3 方电子商务网站，不允许针对不同设备使用不同版本的页面。服务器端语言是进度的电子脚本（我对此一无所知）。

任何帮助将非常感激！！

4

4 回答 4

1

您总是可以尝试使用 JavaScript 链接到其他 JavaScript，并检查用户正在使用哪个浏览器。

这个页面有一些关于动态脚本加载的信息，我相信这是你正在寻找的：http ://unixpapa.com/js/dyna.html

于 2012-02-06T22:51:32.967 回答
1

这些脚本文件有多大？您不必担心移动设备上小于 0.5 兆字节的内容（只要它们加载在页面底部）。

否则，服务器端的解决方案可能效果最好：

如何确定它是否是带有 PHP 的移动设备？

于 2012-02-06T22:54:02.353 回答
1

Modernizr进行特征检测并可以有条件地加载资源。除非你自己推出，否则它或多或少是这种事情的标准。

于 2012-02-06T23:07:56.097 回答
0

假设您有一个像这样的三列桌面布局：

<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-23T20:33:49.893 回答