Question

我想懒得加载一个css文件，然后在加载了之后让javascript修改页面。为此，我使用了this方法，如下所示：

lazyLoadCSS = function (pathToStyleSheet, options, callback) { var stylesheet = document.createElement('link'); stylesheet.href = pathToStyleSheet; stylesheet.rel = 'stylesheet'; stylesheet.type = 'text/css'; // temporarily set media to something inapplicable to ensure // it'll fetch without blocking render stylesheet.media = 'only x'; // set the media back when the stylesheet loads stylesheet.onload = function() { stylesheet.media = 'all'; // here be callbacks... callback(); }; document.getElementsByTagName('head')[0].appendChild(stylesheet); };

所以，这个想法是，javascript抓取CSS，但是把它偷偷带进，因为只有x＆＃39;所以浏览器并不认为在呈现页面的其余部分之前需要等待文件，这就是重点。这个approach似乎非常标准，上面的代码确实很有效......

唯一的问题是回调。它在加载CSS之后，但在将样式应用于文档之前发生。

如果我在回调上放一个计时器，就像这样：

window.setTimeout(function(){ callback(); }, 2000);

然后一切都按照它应该的方式工作（只是缓慢）。

问题是，在运行callback()之前，我怎么能等待加载CSS，还要等待应用？

Answer 1

根据上面的一些评论，这就是我提出来的并且效果很好（虽然没有经过全面测试）：

function waitForStylesToApply(cycleNumber, canary, callback){
    if(cycleNumber < 100){
        window.setTimeout(function(){
            var computedValue = window
                .getComputedStyle(window.document.body, null)
                .getPropertyValue('max-width');
            if(computedValue !== canary){
                if(typeof callback === 'function'){
                    console.log('done in ' + cycleNumber + ' cycles');
                    callback();                                            
                }
            }
            else {
                waitForStylesToApply(cycleNumber++, canary, callback);                        
            }
        }, 10);    
    }
}

一遍又一遍地检查<body>的计算样式，直到它发生变化。然后它进行回调。到目前为止，代码从未经过多次循环，所以等待是无穷小的。

即使延迟10太多了。代码将以0的延迟工作，并且仍然只循环一次。

编辑：使用此函数代替上面示例中的callback()。

回调和懒惰加载css与香草javascript

1 个答案: