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

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

javascript css

Javascript 加载外部css后如何确定何时加载文档,javascript,css,Javascript,Css,如何确定文档何时加载或加载外部css后正在加载第一次使用document.onreadystatechange或document.readyStage加载并完成了普通页面，但之后脚本将调用函数将新样式表CSS放入HTML以更改背景或图像。在更改样式表期间，文档仍处于完成阶段。调用函数后是否从未更改阶段？为什么? 时间线示例：访问一个页面：localhost/index.html 文件已分阶段加载文件已完成阶段用户试图更改主题，此时阶段尚未更改。更新：不带jQuery：更新：使用一个

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

第一次使用document.onreadystatechange或document.readyStage加载并完成了普通页面，但之后脚本将调用函数将新样式表CSS放入HTML以更改背景或图像。在更改样式表期间，文档仍处于完成阶段。调用函数后是否从未更改阶段？为什么?

时间线示例：

访问一个页面：localhost/index.html 文件已分阶段加载文件已完成阶段用户试图更改主题，此时阶段尚未更改。更新：不带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>

找到答案：

但是没有希望。。缺少通用性…

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

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

希望这有助于回答这个问题，动态加载css文件后如何确定文档已加载取决于不同的浏览器供应商。对于所有的浏览器，没有一个单一的确定方法，但是让我们为每个浏览器逐一解决这个问题

序言

完成附加后：

Internet Explorer：点火和加载。 Opera：通过onload触发加载事件。 Chrome：不触发事件，但仅在文件到达后增加document.stylesheets.length。 Firefox：我无法可靠地获得除此之外的任何东西。

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

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);
    };

更新：由于空规则，Scipt在localfile上有错误。我不担心，也不需要修理

更新：Mozilla Firefox没有参考文档。加载的字体和加载的字体不一样。一旦完成，就完成了。您可能可以通过某种方式监视动态链接标记。您想做什么？这是一个问题？从文档状态获取更改；“状态完成”应返回到加载状态，因为将加载大图像。我试图确定它，页面显示为加载页面。你能理解吗？readyState永远不会向后滚动。完成后，您必须单独监控自己的资源。简言之，在onload之后，加载状态比单个全局值所能表示的更复杂……您可以放置示例代码吗？如何监控CSS中需要查看的所有资源。字体正面和背景图片链接在头部的CSS在html发布之前被加载和解析，我不希望与dandavis有所不同。html是浏览器将首先拥有的，并首先开始填充它。布局在css准备就绪之前，页面不会显示，因此无法显示您描述的未设置样式的内容。除非从正文末尾导入工作表…$document.readyfunction{}-一次由文档状态complete调用。但在状态完成后，我想放置新的样式表，状态必须更改为loadingor loaded，因为图像将要加载。jQuery在这方面有点开销，你不觉得吗？我知道document.stylesheets和onLoad，问题是如何通过放置新的css示例来确定所有真正正在加载的文件：body{background image:urlnew_image.png}。

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);
    };