Question

我正在根据页面加载中的每个资源来处理页面加载的百分比栏：我的意思是监视每个图像，或脚本，CSS等，并使用其“加载的事件”来增加一般页面加载的百分比

我已经在一些难以监控某些元素的加载事件的帖子中了，所以我的问题是如何使用javascript / jQuery来完成它？我可以用什么策略来实现这个结果？

我试过这样的事情，但实际上效果不好

function calc(element){
    console.log(element.outerHTML);
    progress++;
    var loadingStatus = ( progress * 100 / totalLength );
    console.log(loadingStatus);
    document.getElementById('loadingBar').style.width = loadingStatus+'%';
}

document.onreadystatechange = function(){
    if(document.readyState == "interactive"){

        progress = 0;
        var styleElements = document.querySelectorAll('style');
        var linkElements = document.querySelectorAll('link');
        var scriptElements = document.querySelectorAll('script[src]');
        var imgElements = document.querySelectorAll('img');
        totalLength = (styleElements.length + linkElements.length + scriptElements.length + imgElements.length);

        for(var i=0; i<styleElements.length; i++){
            styleElements[i].setAttribute('onload','calc(this);');
        }

        for(var i=0; i<linkElements.length; i++){
            var source = linkElements[i].href;
            linkElements[i].remove();
            var newLink = document.createElement('link');
            newLink.setAttribute('href', source);
            newLink.setAttribute('rel', 'stylesheet');
            newLink.setAttribute('onload','calc(this);');
            document.head.appendChild(newLink);
        }

        for(var i=0; i<scriptElements.length; i++){
            var source = scriptElements[i].src;
            scriptElements[i].remove();
            var newScript = document.createElement('script');
            newScript.setAttribute('src', source);
            newScript.setAttribute('onload','calc(this);');
            document.head.appendChild(newScript);
        }

        for(var i=0; i<imgElements.length; i++){
            imgElements[i].setAttribute('onload','calc(this);');
        }

    }
}

实际上这段代码的一些问题是：

资源错误（失败加载，404等）打破百分比计算
<style>元素会在百分比计算中被忽略，具体取决于它们的放置位置（例如<link>元素之后或<script>元素之前）
实际上无法识别由css链接加载的资源

更新：经过一些测试我开始认为所有这些都是完全无用的，因为删除和读取元素（如脚本）我会导致它们被执行2次......

我正在考虑使用文档写入扫描源代码，替换并执行这些操作，但这不仅是一个坏主意，也许这是不可能的，因为我必须在身体的末端执行它（到获取完整页面源，头+全身），当所有脚本和内容都已执行时...

所以..我不知道该怎么办，也许没有办法根据资源负载创建那个进度条吧？

监听每个资源的加载事件（所有脚本，CSS，图像等）

0 个答案: