Question

我编写了一个CSS和Javascript lazyloader来为单独的pagelet动态加载资源（就像Facebook使用BigPipe技术呈现页面一样）。

简而言之，首先呈现HTML帧，然后由服务器异步生成页面的各个部分。当每个pagelet到达时，首先加载pagelets css，然后设置它的innerHTML，最后我们为这个pagelet加载任何所需的javascript并初始化它。

对于任何给定的页面，一切都运行良好，并且感知的加载时间几乎是即时的。

然而，在IE中，偶尔我会在初始化脚本时得到Method does not support method or property。

我通过在加载脚本之前检查document.readyState来解决这个问题。

现在这不是一个大问题，但它平均增加了170毫秒的chrome或firefox的页面加载。这不是必需的。

  function loadScripts(init){

        // ensure document readystate is complete before loading scripts
        if( doc.readyState !== 'complete'){
            setTimeout(function(){
                loadScripts(init);
            }, 1 );
        }
        else{
            complete++;
            if(complete == instance.length){            
                var scripts = checkJS(javascript);
                if(scripts.length) {
                    LazyLoad.js(scripts, function(){                    
                        runPageletScript();
                        for (var i = 0; i < scripts.length; ++i) {
                            TC.loadedJS.push(scripts[i]);
                        }
                    });
                }
                else{
                    runPageletScript();
                }
            }
        }

    }

我正在寻找的是对此脚本的修改，它只会在IE中实现“等待”，如果它是任何其他浏览器，它将立即触发。我不能使用像$.Browser这样的jQuery实用程序，并且需要它是最小的方法。我讨厌使用任何形式的浏览器检测，但它似乎是我唯一的解决方案。那说如果有人能想出另一种方式，那就太棒了。

我们将非常感激地收到任何建议。

Answer 1

您可以使用JScript conditional compilation，这只适用于IE浏览器（最高为IE10）。

因为它是评论，所以最好将其放在new Function内，因为缩小器可能会将其删除，从而更改代码。虽然一般情况下你应该避免使用new Function，在这种情况下，没有任何其他方法可以阻止minifiers删除它。

示例：

var isIE = !(new Function('return 1//@cc_on &0')());

但是，似乎您的主要问题是DOM尚未加载 - 确保在使用DOMContentLoaded事件（IE9 +）运行任何加载器之前已加载：

document.addEventListener('DOMContentLoaded', function () {
    // perform logic here
});

Answer 2

这是另一种解决方案，因为澳航的解决方案可能并不总是有效。例如，在UMTS连接上，提供者可能会删除注释以保存带宽（可能它们保留条件注释）：

if(navigator.appName == 'Microsoft Internet Explorer' 
   &&  doc.readyState !== 'complete'){
  ...
}

如何只在ICE中等待document.readyState并立即为所有其他浏览器触发？

2 个答案: