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

终于有了一个响应迅速的网站。我现在想做的是减少移动设备上加载的脚本，以便更快地加载。手机上的脚本是多余的，所以这似乎是一个很好的起点。

有没有一种方法可以根据设备只加载某些脚本？

该网站是一个第三方电子商务网站，不允许不同设备使用不同版本的页面。服务器端语言是progress的e-script（我对此一无所知）。

任何帮助都将不胜感激！！

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

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

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

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

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

我如何确定它是否'；这是一个带有PHP的移动设备吗？

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

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

相关内容

最新更新

热门标签：