PHP Lang
  1. PHP Lang
  3. Bootstrap – требуется скрывать контент до тех пор, пока модальные нагрузки
Intereting Posts
PHP Curl, получение IP-адреса сервера Как отправить электронные письма HTML / CSS? JavaScript не запускается после добавления Изменение языка с symfony 2.1 Как проверить, включен ли PHP mail ()? штормовой мультиланг кажется только процессом 4Mb spout, а затем останавливается Использование PHP для получения элемента DOM В PHP, какова разница между объявлением переменной как глобальной внутренней функции или передачей переменной в качестве аргумента функции? array_unique с двумя массивами Как бы остановить этот цикл foreach после 3 итераций? Удаленное уничтожение сеанса в php (журналы пользователя в другом месте)? Как ограничить длину тега заголовка с помощью PHP как проверить тип загруженного файла – pdf Зачем использовать dom для анализа веб-страниц вместо регулярного выражения? Yii2 DepDrop kartik

Bootstrap – требуется скрывать контент до тех пор, пока модальные нагрузки

Я использую jquery modal для загрузки нескольких видеороликов Vimeo на одной странице. Я заметил, что вся загрузка видео (34) в DOM влияет на производительность (создавая задержку при загрузке). Поэтому я хочу, чтобы видеоплееры загружались только тогда, когда было shown.bs.modal событие shown.bs.modal .

Здесь почти ничего нет, поэтому я не знаю, как это сделать.

Modal: 

 <div class="modal fade" id="<?php echo $target; ?>" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <iframe class="test" id="vimeo" src="//player.vimeo.com/video/<?php echo $id; ?>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> </div> <div class="modal-footer"> <?php echo $name; ?> </div> </div> </div> </div>

ПРИМЕЧАНИЕ: ПРОЧИТАЙТЕ КОММЕНТАРИИ ПО ПРИНЯТОМ ОТВЕТУ

Related of "Bootstrap – требуется скрывать контент до тех пор, пока модальные нагрузки"

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

Вы можете сначала оставить src ваших фреймов пустыми, чтобы он ничего не загружал. Храните URL-адреса внутри массива, а затем вы можете использовать обработчик событий в shown.bs.modal событии shown.bs.modal как вы упомянули. 

 var iframes = ["URL1","URL2","URL3"]; $('.modal').on('shown.bs.modal', function() { var id = $(this).data('id'); $(this).find('iframe').attr('src',iframes[id]); });

Вы заметите, что я ссылаюсь на data-id , который вы можете легко добавить к каждому из ваших модалов. 

 <div class="modal fade" id="modal1" data-id="0" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal fade" id="modal2" data-id="1" tabindex="-1" role="dialog" aria-hidden="true">

Я начал с 0, так как массивы начинаются с индекса 0.

*** Примечание. Падение на это заключается в том, что iframe придется загружать URL КАЖДЫЙ раз, когда вы открываете соответствующий модальный.

EDIT: На самом деле, используя другой атрибут данных, вы можете каждый раз избегать проблем с загрузкой URL-адресов. Обновлено демо . 

 <div class="modal fade" id="modal1" data-id="0" data-loaded="false" tabindex="-1" role="dialog" aria-hidden="true">

Проверьте атрибут в shown.bs.modal перед заменой URL-адреса, если он уже загружен. 

 $('.modal').on('shown.bs.modal', function() { var loaded = $(this).data('loaded'); if(loaded == false) { var id = $(this).data('id'); $(this).find('iframe').attr('src',iframes[id]); $(this).data('loaded', 'true'); } });

EDIT 2 – с идентификаторами в php-массиве вы можете преобразовать их в массив JS следующим образом: 

 var iframes =<?php echo json_encode($php_array);?>;

Чтобы очистить модальную форму при ее закрытом использовании 

 $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });

Для другой части, не слишком уверенной в том, что вы пытаетесь сделать. Вы можете посмотреть в jScroll, чтобы он загружал остальную часть видео, когда пользователь начинает прокручивать модальный.

Редактировать: вы можете загружать содержимое своего модального файла из внешнего html-файла, таким образом, видеофрагмент iframe будет загружаться только тогда, когда кто-то нажимает на ссылку модального.