Отображение loading.gif перед загрузкой iframe

Question

Итак, у меня есть эта кнопка, которая при нажатии отправит вас на следующий слайд (void (0)).Следующий слайд - iframe, который загружается только при нажатии на кнопку.До полной загрузки iframe должен появиться анимированный GIF-файл и, в свою очередь, скрыться после полной загрузки содержимого.

В моем случае GIF-файл никогда не отображается.Это полностью пусто, пока iframe не будет полностью загружен.Что не так?

Вот сценарий:

<script type="text/javascript"> 
    function hideLoading() { 
        document.getElementById('loading').style.display = "none"; 
        document.getElementById('edtwo').style.display = "block"; 
    } 
</script> 

Кнопка:

<span id="nextBtn1"><a href="javascript:void(0);"
onClick='document.getElementById("edtwo").src="ed2.html";'></a></span>

И следующий слайд, который включает GIF и iframe:

<li><div id="loading"><img src="_img/loading.gif" alt="Loading"/></div>
<iframe id="edtwo" onload="hideLoading()";></iframe></li>

Answer 1

Проблема в том, что ваш iframe изначально отображается (и более того, добавляется в дерево DOM). Несмотря на пустой атрибут src , он загрузит пустую страницу и выполнит обработчик события onload . Таким образом, ваш индикатор будет скрыт в результате вызова hideLoading.

Как вы можете видеть в этом примере, onload запускается без нажатия на ссылку.

Вы можете удалить фрейм из дерева DOM и добавить его, когда пользователь нажмет кнопку «Далее» или заменит .style.display на пустую строку (чтобы показать ее) загрузчика gif в это время.