当前位置： 文江博客话题详情

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

发布于 2025-01-03 05:29:36 字数 209 浏览 1 评论 0原文

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

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

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

任何帮助将不胜感激！

原文

Have finally got a responsive site working (of a fashion). What I want to do now is reduce what scripts are loaded on the mobile devices, so that they load faster. The scripts are redundant on the mobiles so it seems a good place to start.

Is there a way of only loading certain scripts depending on the device?

The site is a 3rd party e-commerce site, which doesn't allow different versions of the page for different devices. The server-side language is progress' e-script (of which I know nothing).

Any help would be much appreciated!!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

笨死的猪 2025-01-10 05:29:36

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

Modernizr does feature detection and can conditionally load resources. It's more or less standard for this kind of thing unless you roll out your own.

回复 原文
川水往事 2025-01-10 05:29:36

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

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

You could always try linking to the other JavaScripts using JavaScript, and include checks for which browser the user is using.

This page has some information about Dynamic Script Loading, which is what I believe you are looking for: http://unixpapa.com/js/dyna.html

回复 原文
多谢你的绝情让我学会死心 2025-01-10 05:29:36

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

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

如何判断是否是带有PHP的移动设备？

How big are these script files? You shouldn't need to worry about anything less than half a megabyte on mobile devices (as long as they're loaded at the bottom of the page).

Otherwise, a server-sided solution will probably work best:

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

回复 原文
北城半夏 2025-01-10 05:29:36

假设您有一个如下所示的三列桌面布局：

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

Suppose you have a three column desktop layout like this:

<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>

And suppose that you've created a responsive site such that:

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

You don't want to load the scripts if they aren't visible, so here's a way to solve that:

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();
回复 原文
~没有更多了~

关于作者

魂牵梦绕锁你心扉

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文