Question

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

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

该网站是第三方电子商务网站，不允许不同版本的网页用于不同的设备。服务器端语言是进度'电子脚本（我什么都不知道）。

任何帮助都将非常感谢!!

Answer 1

您可以尝试使用JavaScript链接到其他JavaScripts，并包括检查用户使用的浏览器。

此页面包含有关动态脚本加载的一些信息，我相信您正在寻找：http://unixpapa.com/js/dyna.html

Answer 2

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

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

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

Answer 3

Modernizr可进行功能检测，并可有条件地加载资源。除非你推出自己的产品，否则它或多或少都是标准的。

Answer 4

假设您有三列桌面布局，如下所示：

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

响应式设计 - 如何加载某些脚本？

4 个答案: