Как добавить индикатор загрузки на мою страницу во время загрузки моего iframe?

Question

В настоящее время я создаю страницу, на которой после нажатия на ссылку вставляется iframe в div и загружается его содержимое.Я делаю это с помощью следующего вызова jQuery:

$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');

Иногда исходный контент загружается очень медленно и, в результате, похоже, что ничего не происходит.Я хотел бы иметь простую анимацию загрузки во время загрузки контента, пока загружается содержимое iframe.Когда iframe заканчивает загрузку, его содержимое должно появиться, и анимация загрузки должна исчезнуть.

Я рассмотрел несколько способов сделать это (например, наличие отдельного загрузчика div для простой замены двух в ииз), но я не уверен, что «лучший» подход к решению этой проблемы.Возможно, я не должен использовать .html ()?Я открыт для предложений, если есть более правильное решение.

Answer 1

Есть ли причина, по которой вы не можете прослушать событие onload самого iframe? Он должен срабатывать после загрузки дочернего содержимого.

Примерно так:

showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }

Answer 2

Итак, в моем случае выполнение следующих действий помогло мне:

HTML

<iframe id="ifrmReportViewer" src="" frameborder="0" style="overflow:hidden;width:100%; height: 1000px;"></iframe>

, и я загружал iFrame при нажатии кнопки, поэтому вот JS

 $(document).ready(function () {

  $('body').on('click','#btnLoadiFrame',function () {

  ShowLoader();

  $('#ifrmReportViewer').attr('src', url);

  $('#ifrmReportViewer').load(function () {

    HideLoader(); 

  });
  });
 });

Answer 3

Просто дайте содержащему элементу (в данном случае #myDiv) фон пульсатора, и содержимое iframe будет перекрывать его, когда он завершит загрузку.

Это самое простое.

Answer 4

Вам необходимо определить метод, который позволит вашему iframe выделять, что он завершил загрузку, например:

Главная страница :

var ChildFrameComplete = function()
{
    $("#progress").hide();
};

var LoadChildFrame = function()
{
  $("#progress").show();
  $("#mydiv").html("<iframe src=\"sourcelink.html\" ... ></iframe>");
};

sourcelink.html :

$(function()
{
  parent.ChildFrameComplete();
});

Если iframe получен из того же домена, что и домен родительской страницы, он может вызывать методы, определенные на родительской странице, через свойство window.parent.