Как показать Preloader до загрузки iframe?

178

01 января 2019, 11:20

$('*[data-target=".humanpower"]').click(function(){
        if(!$('#humanpower').length) {
                $('#humanpower_bl').html('<iframe id="humanpower" src="http://....."></iframe>');
        }
    });

Answer 1

Можно отследить событие onload в котором удалить preloader. Можно еще добавит картинку через background.

document.querySelector('iframe').onload = iframeOnload 
 
function iframeOnload () { 
	document.querySelector('.preloader').remove() 
}

iframe { 
  width: 100%; 
  height: 100%; 
  background: url(http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg) center center no-repeat; 
} 
 
.preloader { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
  font-size: 45px; 
  color: blue; 
}

<div class="modal"> 
  <iframe src="..."></iframe> 
  <div class="preloader" id="preloader"> 
    <p>Загрузка...</p> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Переместить фигуру с помощью циклов в Javascript

Прошу помощи с учебной задачейНе прошу писать все решение, подскажите хоть как в данной задаче в JS выразить мысль (дальше разберусь):

191

javascript

Вопрос по jQuery (js)

есть такой вопрос:

209

javascript

Как сделать карусель (отзывов) используя FancyBox 3?

Не в виде всплывающего окна, а именно как карусел

165

javascript

как очистить пост после передачи данных

Имеется скрипт, для сбора информации из полей email и phone, проблема в том, что после первой передачи, если нужно отредактировать эти поля у других...

150