1

我正在根据页面加载中的每个资源来处理页面加载百分比栏：我的意思是监视每个图像、脚本、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 次......

我正在考虑使用文档写入来扫描源代码，替换并做这些东西，但这不仅是一个坏主意，也许这是不可能的，因为我必须在正文的末尾执行它（以获得完整的页面源，头部 + 全身），当所有脚本和东西都已经执行时......

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

4

0 回答 0