Question

如何确定加载外部CSS后文档何时加载（或正在加载）？

正常页面已在第一时间加载并完成（使用document.onreadystatechange或document.readyStage），但在时间脚本将调用函数以将新样式表CSS放入HTML以更改背景或图像。在更改样式表期间，文档仍处于完成阶段。调用函数后，阶段从未改变过？为什么？

时间轴（示例）：

访问一个页面：localhost / index.html
文档有阶段加载
文档已完成阶段
用户试图更改主题，此时此阶段尚未更改。

UPDATE ：没有jQuery：）

更新：使用一张图片的示例问题：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <script>
        document.onreadystatechange = function(){
            console.log(document.readyState);
        };
        function checkDocumentState(){
            console.log(document.readyState);
            return setTimeout(function(){ 
                checkDocumentState();
            }, 1000);
        }
        checkDocumentState();
    </script>
</head>
<body>
    <img src="" onclick="this.setAttribute('src','http://i.imgur.com/uRBtadp.jpg')" style="width:50px; height:50px; background-color:gray; " /> Press empty image and open new image.
</body>
</html>

enter image description here

找到答案： How can I tell when a CSS background image has loaded? Is an event fired?

但绝望......缺乏普遍性......

Answer 1

在填充DOM元素后调用CSS。这就是为什么在拨号上网的时候，页面会加载所有时髦的外观，然后突然开始逐渐发展成所需的页面。我建议使用Jquery，在这里您可以使用以下代码来确保文档已完全加载并且CSS已经实现

$document.ready(function() {
//Insert Code here
}

希望有所帮助

Answer 2

回答这个问题，如何确定在动态加载css文件后加载的文档取决于那里的不同浏览器供应商。对于所有浏览器，没有一种确定的镜头方式，但是我们可以逐个解决这些问题。

<强>前言

var url = "path_to_some_stylesheet.css",
    head = document.getElementsByTagName('head')[0];
    link = document.createElement('link');

link.type = "text/css";
link.rel = "stylesheet"
link.href = url;
head.appendChild(link);

完成附加后：

Internet Explorer ：触发readystatechange和load。
Opera ：通过onload触发加载事件。
Chrome ：不会触发某个事件，但只有<{>} >文件到达后才会增加document.styesheets.length。
Firefox ：我无法可靠地获取mozAfterPaint以外的任何内容。

Answer 3

我写了这段代码，我想要并为我工作：

window.engineLoading = {images_count:0, images_loaded_count:0, fonts_count:0, fonts_loaded_count:0 };
document.querySelector("a").onclick = function(){ // first elemnet a
    var before_stylesheets_length = document.styleSheets.length;
    var before_fonts_size = document.fonts.size;

    document.fonts.onloadingerror = function(a){
        window.engineLoading.fonts_loaded_count++;
    }               
    document.fonts.onloading = function(a){
        window.engineLoading.fonts_count++;
    }       
    document.fonts.onloadingdone = function(a){
        window.engineLoading.fonts_loaded_count++;
    }

    var head= document.getElementsByTagName('head')[0];
    var style= document.createElement('link');
    style.rel= 'stylesheet';
    style.setAttribute("href","./new_style.css");
    style.onload = function(){
        for(i=before_stylesheets_length; i<document.styleSheets.length; i++){
            var rules = document.styleSheets[i].rules;
            for(q=0; q<rules.length; q++){
                var styles = rules[q].style;
                for(s=0; s<styles.length; s++){
                    console.log(styles[s]);
                    if((styles[s] == "background-image" || styles[s] == "background") && styles.backgroundImage.length > 0){
                        window.engineLoading.images_count++;
                        var body= document.getElementsByTagName('body')[0];
                        var image = document.createElement('img');
                        var url = styles.backgroundImage;
                        url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
                        image.src = url;
                        image.width = 0;
                        image.height = 0;
                        image.setAttribute("class","pace-load-style");
                        image.onload = function(e){
                            console.log(e);
                            window.engineLoading.images_loaded_count++;
                        };
                        image.onerror = function(e){
                            window.engineLoading.images_laoded_count++;
                        }
                        body.appendChild(image);
                        break;
                    }
                }
            }
        }
    };
    style.onerror = function(){};
    head.appendChild(style);


    setTimeout(function(){ 
        checkCurrentState();
    }, 1000);
    return false;
};

    function checkCurrentState(){
        if(window.engineLoading.images_count == window.engineLoading.images_loaded_count && window.engineLoading.fonts_count == window.engineLoading.fonts_loaded_count){
            console.log("loaded"); return true;
        }console.log("still loading...");
    return  setTimeout(function(){ 
            checkCurrentState();
        }, 1000);
    };

UPDATE ：由于空规则，Scipt在本地文件上存在错误。 CSSRules is empty我不担心，也不需要修理它。

更新：Mozilla Firefox没有引用document.fonts。

加载外部css后如何确定何时加载文档

3 个答案: