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

时间：2022-10-01 01:51:28

How to determine when document has loaded(or is loading) after loading external css?

如何确定加载外部CSS后文档何时加载(或正在加载)?

Normal page has loaded and complete at first time(with using document.onreadystatechange or document.readyStage), but after time script will call function to place a new stylesheet CSS into HTML for changing a background or images. During change stylesheet, document has still stage complete. Stage never has been changed after calling function? Why?

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

Timeline(example):

  1. Visit one page : localhost/index.html

    2. 访问一个页面:localhost / index.html

  2. Document has stage loading

    3. 文档有阶段加载

  3. Document has stage complete

    4. 文档已完成阶段

  4. User was trying to change a theme, at this time stage hasnt been changed yet.

    5. 用户正在尝试更改主题,此时此阶段尚未更改。

UPDATE: Without jQuery:)

更新:没有jQuery :)

UPDATE: Example problem with using one image:

更新:使用一个图像的示例问题:

<!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>

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

FOUND ANSWER: How can I tell when a CSS background image has loaded? Is an event fired?

找到答案:如何加载CSS背景图像?事件被解雇了吗?

But hopeless .. lack of universality...

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

3 个解决方案

#1

0  

CSS is called after DOM elements are populated. This is why in the days of dial up internet, the page would load all funky looking, and then all of a sudden start to develop into the desired page bit by bit. I would suggest using Jquery instead, where you could use the following code to be able to ensure the document is fully loaded and the CSS is already implemented

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

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

Hope that helps

希望有所帮助

#2

0  

Answering the question, how to determine the document has loaded after dynamically loading a css file depends upon the different browser vendors out there. There is not a single sure shot way for all the browsers, but lets tackle the problem one by one for each of these browsers.

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

Preface

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

Once that appending is done:

完成附加后:

  • Internet Explorer : fires readystatechange and load.

    • Internet Explorer:触发readystatechange和load。

  • Opera : fires load event via onload.

    • Opera:通过onload触发加载事件。

  • Chrome : Doesnt fire an event but increments document.styesheets.length only after the file has arrived.

    • Chrome:不会触发事件,但只有在文件到达后才会增加document.styesheets.length。

  • Firefox: I was not able to reliably get anything other than mozAfterPaint.

    • Firefox:我无法可靠地获得除mozAfterPaint以外的任何内容。

#3

0  

I wrote this code, what i wanted and worked for me:

我写了这段代码,我想要的并为我工作:

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 has bug on localfile because of empty rule. CSSRules is empty I don't worry about it , and no need fix it.

更新:由于空规则,Scipt在本地文件上有错误。 CSSRules是空的我不担心它,也不需要修复它。

UPDATE: Mozilla Firefox hasnt reference document.fonts.

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

#1

0  

CSS is called after DOM elements are populated. This is why in the days of dial up internet, the page would load all funky looking, and then all of a sudden start to develop into the desired page bit by bit. I would suggest using Jquery instead, where you could use the following code to be able to ensure the document is fully loaded and the CSS is already implemented

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

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

Hope that helps

希望有所帮助

#2

0  

Answering the question, how to determine the document has loaded after dynamically loading a css file depends upon the different browser vendors out there. There is not a single sure shot way for all the browsers, but lets tackle the problem one by one for each of these browsers.

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

Preface

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

Once that appending is done:

完成附加后:

  • Internet Explorer : fires readystatechange and load.

    • Internet Explorer:触发readystatechange和load。

  • Opera : fires load event via onload.

    • Opera:通过onload触发加载事件。

  • Chrome : Doesnt fire an event but increments document.styesheets.length only after the file has arrived.

    • Chrome:不会触发事件,但只有在文件到达后才会增加document.styesheets.length。

  • Firefox: I was not able to reliably get anything other than mozAfterPaint.

    • Firefox:我无法可靠地获得除mozAfterPaint以外的任何内容。

#3

0  

I wrote this code, what i wanted and worked for me:

我写了这段代码,我想要的并为我工作:

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 has bug on localfile because of empty rule. CSSRules is empty I don't worry about it , and no need fix it.

更新:由于空规则,Scipt在本地文件上有错误。 CSSRules是空的我不担心它,也不需要修复它。

UPDATE: Mozilla Firefox hasnt reference document.fonts.

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

标签：

相关文章