Internet Explorer 渲染问题（简单的 JS 计时器 - window.setTimeout）

Question

<script language="JavaScript" type="text/javascript">
    var theBar = createProgressBar(document.getElementById('progress-bar'));

    var value;
    function resetValue() {
        value = 0;
    }

    function showProgress() {
        value += 1;
        theBar.setValue(value);

        if (value < 100) {
            window.setTimeout(showProgress, 100);   
        }

    }
    window.onload=resetValue();showProgress();
</script>

--

<script language="JavaScript" type="text/javascript">
    function createProgressBar(elem) {
        var div1 = document.createElement('DIV');
        div1.className = 'progress-bar-background';
        div1.style.height = elem.offsetHeight + 'px';
        elem.appendChild(div1);

        var div2 = document.createElement('DIV');
        div2.className = 'progress-bar-complete';
        div2.style.height = elem.offsetHeight + 'px';
        div2.style.top = '-' + elem.offsetHeight + 'px';
        elem.appendChild(div2);

        return {
            div1 : div1,
            div2 : div2,
            setValue : function(v) {
                this.div2.style.width = v + '%';
            }
        }
    }
</script>

--

div.field input{
  height: 45px;
  width: 270px;
  font-size: 24px;
}

.progress-bar-background {
            background-color: #D0D0D0;
            width: 100%;
            position: relative;
            overflow:hidden;
            top: 0;
            left: 0;
        }
.progress-bar-complete {
    background-color: green;
    width: 50%;
    position: relative;
    overflow:hidden;
    top: -12px;
    left: 0;
}

#progress-bar {
    width: auto;
    height: 10px;;
    overflow:hidden;
    border: 0px black solid;
}

--

这个 sn-p 在 Chromer、Safari 和 FireFox 下完美运行。

唯一的问题是 Internet Explorer。

它似乎呈现为“半满”并且不执行任何操作。

由于我对 JS 不是很熟悉，所以我不知道从什么开始寻找。

不胜感激一些菜鸟友好的建议。

Answer 1

改变这个...

window.onload=resetValue();showProgress();

到这个...

window.onload = function() {
  createProgressBar();      
  resetValue();
  showProgress();
};

你应该没事的。

记住... "window.onload" 是 Window 对象的一个​​属性......并且这个属性的值应该是一个函数，一旦浏览器加载了整个 DOM AND 所有内容（图像、css、js等）

然而，这不是一个执行你的东西的好地方——你应该使用事件“onContentLoaded”，但由于它不是跨浏览器统一支持的——你应该使用 JavaScript 库，例如 jQuery、Prototype 或 MooTools。

但是——当然，如果你是 JS 的新手——不要为了获得使用这些库的乐趣而略读它——首先要真正了解 JavaScript 是什么以及如何兼顾由于浏览器不兼容 - 只有这样您才能充分发挥这些库的潜力。

Answer 2

我看到的第一件事是，在页面加载之前，您不应该创建进度条（或引用 DOM 中的任何内容）。 IE对此特别敏感。在我看来，您是在加载 javascript 时而不是在加载页面之后调用 createProgressBar。

当我将你的东西放入 jsFiddle 并确保代码在页面加载之前不会运行时，它适用于我在 IE8 中。

在这里查看：http://jsfiddle.net/jfriend00/CQqat/