2

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

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

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

这是页面的结构<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 文件呢？

4

1 回答 1

0

参考此示例 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。

于 2012-11-05T08:22:55.143 回答