Question

js如何判断css加载成功

整个html页面是通过ajax下载下来的，导致页面上写入的link css文件被当做是代码而不是一个代码载入了，因此css还没有加载完就开始渲染dom节点，会出现进入页面的时候一开始布局是乱掉的，等css加载完成才会呈现正确的布局，我应该如何判断css加载成功了再开始渲染dom节点，求助，在线等。
导致页面上写入的link css文件被当做是代码而不是一个文件载入，上面写错了，不知道怎么编辑，这里修正一下

Answer 1

你可以用ajax载入css文件的内容，在onload事件中把css写入到html的style标签里面，这样就可以把样式注入进去了，然后再注入节点信息就能正常渲染了。

追问

window.onload?..你的qq多少啊，能不能具体请教一下，我纠结这个问题两天了

追答

ajax的onload啊，你之前的html是怎么知道载入成功的？无论你ajax采用的什么框架，使用的都是xhr，那就会有onload事件啊，比如jquery的:

$.ajax({
    url:"./css.css",
    type:"get",
    success:function(data){
        $("head").append("<style>"+data+"</style>");
    }
});
// 原始js
var xhr = new XMLHttpRequest();
var stateChangeHandle=function(){
    if (_t.xhr.readyState == 4) {
        var result="";
        if ((_t.xhr.status >= 200 && _t.xhr.status < 300) || _t.xhr.status == 304) {
            result = _t.xhr.responseText;
            document.getElementByTagName('head')[0].innerHTML + "<style>"+data+"</style>";
        }
        xhr=null;
    }
};
xhr.onload = stateChangeHandle;
xhr.open('GET','./css.css',true);
xhr.send();

Answer 2

那你在 document.ready 状态下在去拉取ajax的html页面，这样就不会出现css没加载完就去请求模板数据；
如果你采用jquery
$(document).ready(function() { //网页就绪
$.getJSON('', {}, function(rep) {
});
});