Как установить прелоадер на div с подгружаемым содержимым
 

Приветствую уважаемые форумчане!!!

Никак не удается установить прелоадер на контейнер div в котором отображается содержимое загружаемое скриптами с другого ресурса.

Вот контейнер:

<div class="mydiv"
<div id="tj-store-app"></div>
<script type="text/javascript">function addScript(path){var tjs=document.createElement('script'); tjs.type='text/javascript';tjs.async = true;tjs.src=path;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tjs, s); };

addScript("https://cabinet.xn-----6kcabd1eqfgcfyoae1a.xn--p1ai/code/store_app?menu=js/no-menu.js&use_partials_folder=true");
tj_partials_folder_url = "/tj-store/app/partials";
</script>
</div>


Вот код прелодера, который я вставляв в этот mydiv

<div class="loader">
<div class="loader_inner"></div>
</div>


Других идей кроме как поставить функцию для скрытие прелоадера на событие onload у меня не возникло.

Нашел функцию:

function iframeOnload() {
document.querySelector('.loader').classList.add('h idden')
}

Не хочет работать.

На некольких других сайтах пользовался этим же прелоадером и функцией

$(window).load(function() {

$(".loader_inner").fadeOut();
$(".loader").delay(400).fadeOut("slow");

});


Работает нормально, но как ее переделать для работы не со всем сайтом а с отдельным div? подскажите пожалуйста, заранее благодарен.

В JS полный новичок, думаю это было понятно )

Последовательность событий такая:

- Генерируется скрипт
- скрипт создает и вставляет в mydiv елемент <iframe>
- iframe загружает содержимое с другого ресурса

И здесь целых две трудно решаемые проблемы:

iframe - это отдельный window, который содержит свой документ. и событие load у него тоже свое, никак не связанное с load основного окна.

Далее. Скрипт асинхронный. Он может вставить iframe после того как загрузится основной документ или раньше. Он также никак не синхронизирован с выполнением вашего скрипта. Он может выполниться позже или раньше вашего скрипта. Если позже - то ваш скрипт не найдет ифрейм потому что его еще не существует и событие load навесить будет не на что. Если раньше - то событие load также может произойти раньше и повесить на него обработчик нельзя ибо поезд ушел.

Поэтому лучше не заморачиваться и сделать так - поставить картинку loader.gif на backgound:

<div class="mydiv" style="background: url('loader.gif') no-repeat center center"/>

Когда загрузится документ в iframe, то закроет эту картинку своим фоном.

Спасибо Вам огромное, элегантное решение, буду пробовать