Question

我正在使用Mobilize.js framework，并动员了我的网站。一切都运行良好，网站看起来像预期的那样，无论是桌面还是移动。

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

但我面临的问题是，当网站在移动设备中打开时，它仍会加载重背景图片，即使它不需要动员版。根据{{3}}，一旦检测到移动浏览器，它应该停止加载图像和其他文件。

以下是网页<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文件加载？

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

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

1 个答案: