Показывать загрузку gif, пока загружается контент страницы iframe

Я искал и пробовал различные решения для того, чего я пытаюсь достичь, безрезультатно...

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

Я использую javascript motion gallery, чтобы позволить пользователю управлять прокруткой изображений с помощью мыши. Изображения не прокручиваются, пока страница не будет полностью загружена. Чтобы свести к минимуму путаницу, я подумал, что загрузка gif-изображения будет более эффективной, но я не могу ее снять. Если вы нажмете любую из категорий портфеля (свадьба, помолвка, портрет), вы заметите значительное время ожидания для загрузки изображений.

Если кто-нибудь может дать мне знать, как добиться этого в iframe, пожалуйста, дайте мне знать. И если бы вы могли уточнить, какой код использовать и где, я новичок: |

Ответы

Ответ 1

Замените тег IFRAME на этой странице ниже HTML. IFRAME покрывается DIV, где находится загрузочное изображение (или любое изображение). Изображение находится в центре области DIV, и его размер может быть до 950x633 пикселей. Когда страница IFRAME загружена, загрузочное изображение будет скрыто.

Что вам нужно изменить, это URL-адрес изображения для вашего сайта. Вы также можете изменить цвет фона DIV (в настоящее время установлен на #FFF).

<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>

Ответ 2

Вы можете использовать jquery для запуска при загрузке iframe

$('#iframeTest').on("load", function () {
    console.log('iframe loaded'); //replace with code to hide loader
});