加载单页面应用IOS端出现黑屏的问题，解决方案

要解决这个问题，可进行异步加载js和css。

解决完了以后测试时发现。android，在低版本不支持css的异步加载

所以做如下处理

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css"  media="none" onload="if(media!='all')media='all'">

其实导入方式有多种：

第一种

页面直接写

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css"  media="none" onload="if(media!='all')media='all'">

判断是android终端的话在增加

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css">

相当于android终端页面会加载两个样式

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css"  media="none" onload="if(media!='all')media='all'">
<link rel="stylesheet" href="styles/vendor-6c0bf35735.css">

第二种

页面直接写

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css"  media="none" onload="if(media!='all')media='all'">

判断是android终端的话删除掉 media="none" onload="if(media!='all')media='all'" 这两个属性

document.getElementsByTagName('link')[0].removeAttribute('media');

document.getElementsByTagName('link')[0].removeAttribute('onload');

第三种

判断页面是ios端时加载

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css"  media="none" onload="if(media!='all')media='all'">

是android终端时加载

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css">

经过测试第一种加载最快 css样式大小129b左右，虽加载了两次但速度最快，

附css异步加载的意义和详细说明   http://www.codeceo.com/article/css-asyn-load.html

黑屏完整代码

<link rel="stylesheet" href="styles/vendor-6c0bf35735.css"  media="none" onload="if(media!='all')media='all'">

最终解决方案：区分ios和android终端加载不一样的css样式解决在安卓低版本中不能异步加载css的问题

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);          //ios终端

var dynamicLoading = {

    css: function(path){

    if(!path || path.length === 0){

      throw new Error('argument "path" is required !');

    }

    var head = document.getElementsByTagName('head')[0];

        var link = document.createElement('link');

        link.href = path;

        link.rel = 'stylesheet';

        link.type = 'text/css';

     // link.setAttribute('onload',"if(media!='all')media='all'");

        head.appendChild(link);

    }

};

if(isAndroid){     //如果是android

  dynamicLoading.css('styles/vendor-6c0bf35735.css');   //增加样式一

  dynamicLoading.css('styles/app-8d1c924752.css');      //增加样式二

}

  <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js async -->

  <!-- bower:js -->

  <script src="../bower_components/angular/angular.js"></script>

  <!-- endbower -->

  <!-- inject:js -->

  <script src="app/jifen.market/jifen.market.module.js"></script>

  <script src="app/jifen.market/services/order.service.js"></script>

   ...

  <!-- endinject -->

  <!-- inject:partials -->                                                      

  <!-- angular templates will be automatically converted in js and inserted here -->

  <!-- endinject -->                                       把HTML文件打包成js文件                                        

  <script src="angular.bootstrap.js"></script>             angular 异步启动代码里面放置   angular.element(document).ready(function() { angular.bootstrap(document, ['jifen']);});

  <!-- endbuild -->

   整体打包成了 APP.js 一个文件

最终解决方案：区分ios和android终端加载不一样的css样式

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);          //ios终端

if(isAndroid){     //如果是android 

  dynamicLoading.css('styles/vendor-6c0bf35735.css');   //增加样式一

  dynamicLoading.css('styles/app-8d1c924752.css');      //增加样式二

}

var dynamicLoading = {

    css: function(path){

    if(!path || path.length === 0){

      throw new Error('argument "path" is required !');

    }

    var head = document.getElementsByTagName('head')[0];

        var link = document.createElement('link');

        link.href = path;

        link.rel = 'stylesheet';

        link.type = 'text/css';

     // link.setAttribute('onload',"if(media!='all')media='all'");

        head.appendChild(link);

    }

};

  <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js async -->

  <!-- bower:js -->

  <script src="../bower_components/angular/angular.js"></script>

  <!-- endbower -->

  <!-- inject:js -->

  <script src="app/jifen.market/jifen.market.module.js"></script>

  <script src="app/jifen.market/services/order.service.js"></script>

   ...

  <!-- endinject -->

  <!-- inject:partials -->                                                      

  <!-- angular templates will be automatically converted in js and inserted here -->

  <!-- endinject -->                                       把HTML文件打包成js文件                                        

  <script src="angular.bootstrap.js"></script>             angular 异步启动代码里面放置   angular.element(document).ready(function() { angular.bootstrap(document, ['jifen']);});

  <!-- endbuild -->

   整体打包成了 APP.js 一个文件