0

Здравствуйте. Есть такой вод кусок кода в странице, но в результате страница ощутимо дольше грузится, видимо, пока не прогрузяться все скрипты. Код как видим одиноковый в часьи JS и HTML. разница лишь в адресе, который грузиться в iframe и в классах, благодаря которым запускается соответственно нужный кусок кода. Как оптимизировать этот участок кода, чтобы его сократить и в конечном итоге уменьшить время загрузки страницы?

<script type="text/javascript">
$(document).ready(function(){
  $('.launch-modal-toyota').click(function(){
    $('#myModalOption-toyota').modal({
      backdrop: 'static',
      keyboard: true,
      remote: true,
      width:750,
      height:654
    });
  }); 
});
$(document).ready(function(){
  $('.launch-modal-nissan').click(function(){
    $('#myModalOption-nissan').modal({
      backdrop: 'static',
      keyboard: true,
      width:750,
      height:654
    });
  }); 
});
$(document).ready(function(){
  $('.launch-modal-honda').click(function(){
    $('#myModalOption-honda').modal({
      backdrop: 'static',
      keyboard: true,
      width:750,
      height:654
    });
  }); 
});
</script>

 <!-- HTML код модального окна Toyota-->
<div id="myModalOption-toyota" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="row h4 aligncenter">Параметры автомобиля</div>
      </div>
      <div class="modal-body">
<iframe class="nobord" src="/catalog/toyota.html">
    Ваш браузер не поддерживает плавающие фреймы!
 </iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn1" data-dismiss="modal">Закрыть окно</button>

      </div>
    </div>
  </div>
</div>
 <!-- HTML код модального окна Toyota-->
<div id="myModalOption-nissan" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="row h4 aligncenter">Параметры автомобиля</div>
      </div>
      <div class="modal-body">
<iframe class="nobord" src="/catalog/nissan.html">
    Ваш браузер не поддерживает плавающие фреймы!
 </iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn1" data-dismiss="modal">Закрыть окно</button>

      </div>
    </div>
  </div>
</div>
 <!-- HTML код модального окна Toyota-->
<div id="myModalOption-honda" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="row h4 aligncenter">Параметры автомобиля</div>
      </div>
      <div class="modal-body">
<iframe class="nobord" src="/catalog/honda.html">
    Ваш браузер не поддерживает плавающие фреймы!
 </iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn1" data-dismiss="modal">Закрыть окно</button>

      </div>
    </div>
  </div>
</div>
3
  • Поясните в результате чего страница дольше грузится?
    – ActivX
    27 мая 2015 в 18:25
  • Когда в коде присутствует этот кусок кода (я тут привел всего по 3 куска из JS и html а там их 40), то страница грузиться ощутимо дольше. Можно ли как-то упростить код?
    – Batyabest
    28 мая 2015 в 8:47
  • Оптимизировать вызов модального окна можно, но скорость загрузки от этого вряд ли уменьшится, проблема скорее всего в загрузке контента через iframe, и решить это можно, если грузить данные не через iframe, а через AJAX
    – MasterAlex
    28 мая 2015 в 9:42

3 ответа 3

1

С учётом того, что у вас Twitter Bootstrap 3, модальные окна можно вызывать вообще без дополнительных скриптов, размеры окна можно задать в css, а другие параметры, это параметры по умолчанию:

backdrop: 'static',
keyboard: true,

Смотрим пример:

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2
  • Дело не в вызове модального окна, оно как раз и вызывается стандартно. дело в том, что кода много и я подозреваю много лишнего... и еще проблема - я ее написал предыдущем комментарии.
    – Batyabest
    28 мая 2015 в 11:48
  • Вы представили кусок кода и спросили как его оптимизировать, я ответил, для дальнейшей оптимизации нужно больше кода, как я уже написал в комментарии в вопросу, можно использовать AJAX-запрос, который будет получать данные с нужной страницы и передавать их в тело модального окна и тогда модальное окно в коде будет только одно, но для этого нужно знать всю цепочку манипуляций.
    – MasterAlex
    28 мая 2015 в 12:43
0

Вешайте события не на каждый элемент в отдельности, а на класс в целом, добавте им всем один класс и вешайте событие на все сразу, это сократит ваш код

$('.launch-modal-honda .allmodal').click(function(){
    $('ЗДЕсь заберите через this ваш элемент который вызвал событие').modal({
      backdrop: 'static',
      keyboard: true,
      width:750,
      height:654
    });
  }); 
0
$('.launch-modal-toyota').click(function(){
  $('#myModalOption-toyota').modal({

Замени на

$('body').on('click', '.launch-modal', function() {
  $('#myModalOption-' + $(this).data(model)).modal({

А это (или что там у тебя есть)

<a class="launch-modal-toyota">Modal</a>

на

<a class="launch-modal" data-model="toyota">Modal</a>
2
  • А еще один вопрос в догонку - эя делал подгрузку содержимого стандартными средствами bootstrap 3, и все открывалось как положено и работает шустро, но никак не получилось подвязать второе модальное окно. Идея така - в первом окне форма, пользователь там чего-то выбирает, галочки ставит... потом жмет отправить и должно это окно закрыться а открыться другое с еще одной формой из одного инпута, там пользователь введ или не ввел данные не важно, а когда он уже во втором модальном окне нажал отправить - все улетело на почту (из первого и второго модальных окон). Или отдельным вопросом оформить?
    – Batyabest
    28 мая 2015 в 11:39
  • @Batyabest, отдельным вопросом. Так замечательный комплект костылей понадобится, чтобы с оверлеем разобраться...
    – Qwertiy
    28 мая 2015 в 13:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.