Mobilize.js - 避免加载不必要的文件答案

【问题标题】：Mobilize.js - avoid loading unnecessary filesMobilize.js - 避免加载不必要的文件
【发布时间】：2012-11-05 08:15:18
【问题描述】：

我正在使用Mobilize.js framework 并已启动我的网站。一切正常，网站在桌面和移动设备上看起来都符合预期。

我的网站的桌面版本包含一个小的重背景图片。但我没有在移动版中包含背景或任何其他图像，因此即使在低带宽手机上也能尽可能快地加载。

但我面临的问题是，当网站在手机中打开时，它仍然会加载沉重的背景图片，即使它在动员版。根据official documentation，一旦检测到移动浏览器，它就应该停止加载图像和其他文件。

这是页面<head>的结构

<script src="js/jquery-1.8.2.min.js"></script>

<script>
    //to define the structure of the mobile version
    function mobilizeCustomInit()
    {
        ...
    }
</script>   

<!-- load the core mobilize js file -->
<script type="text/javascript" src="/mobilize/js/mobilize.core.min.js"></script> 

<!-- set the cdn options -->
<script type="text/javascript">
    mobilize.cdnOptions.baseURL = "http://mywebsite.com/mobilize";
</script>

<!-- css stylesheet - CSS FOR DESKTOP ONLY -->
<link rel="stylesheet" href="main.css">

从上面的<head> 结构可以看出，我在 mobilize.js 文件之后包含了桌面样式表（其中定义了仅桌面背景图像样式）。因此 mobilize.js 文件将首先加载并执行，并且应该停止“main.css”文件（或至少在此 css 文件中使用的图像）加载，但它没有发生。

那么，当网站在移动端打开时，我应该怎么做才能阻止桌面版css文件的加载呢？

【问题讨论】：

标签： jquery html jquery-mobile mobile mobilize.js

【解决方案1】：

参考这个示例 html 页面 - https://github.com/mobilizejs/mobilize.js/blob/master/integrations/example/sample.html

你应该打电话来

    <script type="text/javascript">

        // Called when mobilize.js is autoloading and init() is called
        function mobilizeCustomInit() {

             // Add new Javascript and CSS files to mobile
             // file loading list

             // Note: Slashdot at the beginning of the filename
             // indicates that the file path is relative to the HTML file location.
             // This is an internal trick of mobilize.js.
             mobilize.cdnOptions.javascriptBundles.push("./mobilize.yoursite.js");
             mobilize.cdnOptions.cssBundles.push("./mobile-style.css");                 
        }            
    </script>

这样你就可以加载特定的移动 js 和 css。

【讨论】：

感谢您的回复。但正如我在 mobilizeCustomInit() 已经声明的问题中提到的，我在这个函数中调用了所有必需的东西。此外，即使我没有指定移动特定的 css 和 js，它也应该加载没有 css 和 js 的移动页面，但不应该加载桌面特定的内容。所以，我主要关心的是如何避免桌面特定内容，而不是如何加载移动特定内容。