Как показать загрузку GIF при загрузке веб-сайта iframe?

Question

У меня есть файл inc / content.php, который содержит iframe с src = для моего домена.

На моей странице index.php есть кнопка <button id="nextButton" onClick="viewNext();return false;">New</button>, которая при нажатии вызывает следующую функцию JavaScript:

<script type="text/javascript">
function viewNext()
{
  $('#content').load('inc/content.php');
}
</script>

Функция загружает iframe из файла inc/content.php в index.php страницу <div id="content"></div>

Как я могу показать loading.gif изображение, пока файл inc/content.php загружается в индексный файл?

Answer 1

Вы можете отобразить загружаемое изображение перед загрузкой страницы и скрыть его по завершении (используйте второй параметр для добавления обратного вызова, который вызывается после завершения запроса):

$("#loading").show();
$("#content").load("inc/content.php", function () {
    $("#loading").hide();
});

Очевидно, вам нужен элемент в документе с идентификатором loading, например:

<img id="loading" src="loading.gif" alt="Loading">

Answer 2

<script type="text/javascript">
function viewNext()
{
  show_loading()
  $('#content').load('inc/content.php' , hide_loading );
}

function show_loading(){ $('.loading').show() }
function hide_loading(){ $('.loading').hide() }
</script>

Хотя «loading» - это имя класса div, содержащего loading.gif.

---

Для изображения loading.gif вы должны поместить его в div, который может «плавать»в центре вашей страницы, например:

HTMLCODE:

<div style="position:absolute; top:100px; left:50%;" class="loading">
     <img src="/img/loading.gif" />
</div>

Вы можете изменить отображаемую позицию загрузочного изображения, изменив встроенный стиль "top: ...; left:....;».Если вы хотите разместить позиции загрузки на экране вместо позиции страницы, замените position:absolute; на: position:fixed; (хотя это не будет работать с IE)

Answer 3

Если вы хотите, чтобы это выглядело хорошо, вот решение, которое я использую на работе, которое помещает модальный экран и загрузочный gif в середине.

<script type="text/javascript">
function viewNext()
{  
  $('#loading').attr( 'src', 'some_path/loading.gif' );
  $('#container').block( { message: $( '#loading' ) } );
  $('#content').load('inc/content.php' , function(){ $('#container').unblock(); } );
}
</script>

оно использует jquery.blockUI.js, которыйпозволяет мне заблокировать определенный контейнер, может быть div или весь экран.

HTML, который вам нужен, это

<img id="loading" style="display: none;" src="" />