Проблема с отображением в 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;
}

-

Этот фрагмент прекрасно работает в 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 особенно чувствителен к этому.Мне кажется, что вы вызываете createProgressBar именно тогда, когда загружается JavaScript, а не после загрузки страницы.

Когда я помещаю ваши вещи в jsFiddle и проверяю, что код не запускается до тех пор, покастраница загружена, у меня работает в IE8.

Смотрите здесь: http://jsfiddle.net/jfriend00/CQqat/