Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2018, 16:47
Новичок на форуме
Отправить личное сообщение для berdps Посмотреть профиль Найти все сообщения от berdps
 
Регистрация: 16.07.2018
Сообщений: 2

Как установить прелоадер на 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 полный новичок, думаю это было понятно )
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2018, 02:18
Интересующийся
Отправить личное сообщение для senex Посмотреть профиль Найти все сообщения от senex
 
Регистрация: 09.12.2014
Сообщений: 10

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

- Генерируется скрипт
- скрипт создает и вставляет в 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, то закроет эту картинку своим фоном.

Последний раз редактировалось senex, 17.07.2018 в 02:22.
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2018, 14:48
Новичок на форуме
Отправить личное сообщение для berdps Посмотреть профиль Найти все сообщения от berdps
 
Регистрация: 16.07.2018
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обновить содержимое div (или какую функцию вызвать)? unity555 Events/DOM/Window 3 19.12.2017 16:38
Как создать div на чужом сайте? liz2887yoko Элементы интерфейса 0 29.10.2017 03:09
Как найти текст в нескольких div housewm Events/DOM/Window 21 24.12.2013 16:05
Как вставить найденный элемент в другой div, DOM titan1993 Элементы интерфейса 2 05.11.2013 16:52
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25