Как добавить индикатор выполнения в iframe?

Question

[Дмитрий]

Есть спойлер с фреймами, в каждой закладке спойлера один iframe, в котором выводится содержимое файла .pdf с ГуглДиска, примерно так:

<iframe> src="https://drive.google.com/.../preview" width="640" height="480"></iframe>

Как на время открытия файла показать какое-то фоновой изображение и индикатор выполнения? Индикатор с процентами не обязательно, достаточно простой вертушки.
При раскрытии вкладки спойлера с iframe документ начинает загружаться. Файл довольно большой и грузится несколько секунд, может быть секунд 10 и более. На это время пользователь видит просто пустое серое окно, думает, что что-то не работает, и может уйти со страницы. По окончании загрузки документ отображается. У iframe есть событие onload, значит теоретически можно при раскрытии спойлера сразу запустить скрипт с прелоадером, а по окончании загрузки файла этот момент отследить и выключить скрипт. Идея вроде понятна, но как ее реализовать?

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Есть хороший плагин. Называется Use Your Drive. Можно создавать как файловый архив, так и встраивать документы в страницу.
Пример pdf встроенного в страницу - https://spartan.by/portfolio/simmetrija
Там и прелоадер и много полезных плюшек - https://codecanyon.net/item/useyourdrive-google-dr...

Comments

[Дмитрий]

azerphoenix, спасибо за наводку. Плагин хорош, пригодится в следующих проектах. В данном случае огромное количество опций и настроек не нужны. Ради конкретной и ограниченной задачи подключать такого монстра нецелесообразно.