Question

我在思考而不是并行加载所有内容。我将允许加载和显示基本的无样式布局，然后在页面加载完成后加载css文件，但是在Javascript中成为新手。我无法做到这一点。

直到现在我已经尝试过：

<head>
   <script type='text/javascript'>
      function addstyle()
      {
        document.getElementBytype('text/css').href='style.css';
      }
   </script>
   <link rel="stylesheet" type="text/css" href="">
</head>
<body onload="addstyle()">
   <h1>Good Morning</h1>
   <p>Hello whats up</p>
   <p>Hope you will have a great day ahead</p>
</body>

在这里，您可以看到，我在浏览器中显示页面后尝试加载style.css，但它无效。

Answer 1

试试这个：

<head>
<script type='text/javascript'>
function addstyle()
{
    document.getElementById('style').href='style.css';
}
</script>
<link rel="stylesheet" id="style" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Good Morning</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day ahead</p>
</body>

Answer 2

如果您使用的是jQuery，可以执行以下操作：

$(document).ready(function(){
    var $style_element = $(document.createElement('style'));
    $style_element.attr({href:'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css', rel:'stylesheet', type:'text/css', id:'some_id'});
    $('head').append($style_element);
});

如何在加载和显示没有任何样式的页面后加载样式表

2 个答案: