Перейти к содержимому

Фотография
- - - - -

Конфликт скриптов: когда нужен "async", а когда - "defer"?


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 VladimirBuzin

VladimirBuzin

    Прохожий

    Топикстартер
  • Участник
  • 0
    14 сообщ.

Отправлено 09 Август 2018 в 21:13

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

Файл stomkab-main.html (скрипт карусели в конце кода):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Студия современной стоматологии |</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <link rel="shortcut icon" href="images/toothdoctor_diente_10728.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/form-style.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/window-style.css" type="text/css" media="all">
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/roundabout.js" type="text/javascript"></script>
<script src="js/roundabout_shapes.js" type="text/javascript"></script>
<script type="text/javascript" src="selects.js"></script>
  <!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><![endif]-->
  <!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
 
</head>
 
<body>
 
<div class="page-wrapper">
...
<!--Карусель-->
<aside>
    <div class="main">
        <a href="#" class="btnPrev"><img src="images/button-1.png" alt=""></a><a href="#" class="btnNext"><img src="images/button-2.png" alt=""></a>
        <div id="carousel">
            <ul id="myRoundabout">
              <li><img src="images/1307777.jpg" alt="" /></li>
              <li><img src="images/news_file_24_l.jpg" alt="" /></li>
              <li><img src="images/stomat-03.jpg" alt="" /></li>
              <li><img src="images/Untitled-6.jpg.6d243a94d32c96a062ba4d3e399b24f0.jpg" alt="" /></li>
              <li><img src="images/80414_content_Вэладент_улыбайся.jpg" alt="" /></li>
              <li><img src="images/5d0eda80b4c8fd12548c50b746e50a5a.jpg" alt="" /></li>
              <li><img src="images/akciya-plastinochnyj-protez-2e319f0a7265b99e24824ce68036675e.jpg" alt="" /></li>
            </ul>
          </div>
    </div>
</aside>
...
<!--Форма записи пациента к врачу-->
                        <div class="container" id="yak1">
                             <form id="InsertForm" action="#" method="POST" class="checkout">
                                 <div class="checkout-header">
                                     <h1 class="checkout-title">
 
                                         Записаться на приём
                                         <span class="checkout-price">GO!</span>
 
                                     </h1>
 
                                 </div>
                                 <p>
                                     <input type="text" name="surname" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Фамилия" title="Введите фамилию на русском языке, от 2 до 30 букв без пробелов" maxlength="30" required>
                                     <input type="text" name="name" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Имя" title="Введите имя на русском языке, от 2 до 30 букв без пробелов" maxlength="30" required>
                                     <input type="text" name="patronymic" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{7,30}" placeholder="Отчество" title="Введите отчество на русском языке, от 7 до 30 букв без пробелов" maxlength="30" required>
                                     <input type="text" name="nomer_telefona" size="30" class="checkout-input checkout-name" pattern="\+([0-9]{1,3})(\([0-9]{2,5}\))([0-9]{5,7})" placeholder="Номер телефона" title="Введите номер телефона в формате +<код страны>(<код региона/оператора>)<номер телефона> без пробелов. Код страны содержит от 1 до 3 цифр, код региона/оператора - от 2 до 5 цифр, а номер телефона - от 5 ддо 7 цифр" maxlength="30" required>
                                 </p>
 
                                 <p>
 
                                     <input type="text" name="pochta" size="80" class="checkout-input checkout-name" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="E-mail" title="Введите адрес электронной почты в формате <имя_пользователя>@<Название_сайта>.<домен_государства> без пробелов. Имя пользователя и название сайта содержат не менее 1 символа, а домен государства - от 2 до 8 букв" maxlength="80" required>
 
                                     <select name="med_spec" id="med_spec" class="checkout-input checkout-name" required>
                                       <option value="0">Выберите область медицины</option>
                                       <option value="1">Терапия</option>
                                       <option value="2">Хирургия</option>
                                       <option value="3">Ортопедия</option>
                                       <option value="4">Ортодонтия</option>
                                       <option value="5">Пародонтология</option>
                                     </select>
 
                                     <select name="services" id="services" class="checkout-input checkout-name" disabled required>
                                       <option value="0">Выберите услугу</option>
                                     </select>
 
                                     <select name="doctors" id="doctors" class="checkout-input checkout-name" disabled required>
                                       <option value="0">Выберите врача</option>
                                     </select>
 
                                 </p>
 
                                 <p>
                                     <input type="text" name="data_priema" class="checkout-input checkout-name" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="Дата приёма" title="Введите дату приёма пациента в формате <ГГГГ>-<ММ>-<ДД> без пробелов" maxlength="10" required>
                                     <select name="vremya_priema" class="checkout-input checkout-name" required>
                                       <option>Выберите время приёма</option>
                                       <option value="08:00">8:00</option>
                                       <option value="08:49">8:49</option>
                                       <option value="09:38">9:38</option>
                                       <option value="10:27">10:27</option>
                                       <option value="11:16">11:16</option>
                                       <option value="12:05">12:05</option>
                                       <option value="13:43">13:43</option>
                                       <option value="14:32">14:32</option>
                                       <option value="15:21">15:21</option>
                                       <option value="16:10">16:10</option>
                                       <option value="16:59">16:59</option>
                                       <option value="17:48">17:48</option>
                                       <option value="19:26">19:26</option>
                                     </select>
                                 </p>
 
                                 <p>
                                     <input type="submit" value="Записаться" class="checkout-btn">
                                 </p>
 
                             </form>
                        </div>
...
</div>
...
<!--Модальное окно-->
<div class="modal-wrapper">
 
  <div class="modal">
 
    <div class="head">
 
      <a class="btn-close trigger" href="#">
 
        <i class="fa fa-times" aria-hidden="true"></i>
 
      </a>
 
    </div>
 
    <div class="content">
 
        <div class="good-job">
 
          <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
 
          <h1></h1>
 
        </div>
 
    </div>
 
  </div>
 
</div>
...
<!--Скрипт карусели-->
<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul#myRoundabout').roundabout({
         shape: 'figure8'
      });
      
      var cnn=[]
    $('#myRoundabout li').each(function(){
        cnn.push(this)
    })
    
    var curr=0
    $('.btnPrev').live('click',function(){
        if(curr<0)
            curr=cnn.length-1
        else
            curr--
        $(cnn.slice(curr,curr+1)).trigger('click')
        return false
    })
    $('.btnNext').live('click',function(){
        if(curr<cnn.length)
            curr++
        else
            curr=0
        $(cnn.slice(curr,curr+1)).trigger('click')
        return false
    })
   });
   // ]]>
  </script> 
</body>
</html>

Файл selects.js

//Связанные выпадающие списки
$(document).ready(function () {
    $('#med_spec').change(function () {
        var med_spec = $(this).val();
        if (med_spec == '0') {
            $('#services').html('<option>Выберите услугу</option>');
            $('#services').attr('disabled', true);
            $('#doctors').html('<option>Выберите врача</option>');
            $('#doctors').attr('disabled', true);
            return(false);
        }
        $('#services').attr('disabled', true);
        $('#services').html('<option>Загрузка...</option>');
        
        var url = 'get_services.php';
        
        $.post(
            url,
            "med_spec=" + med_spec,
            function (result) {
                if (result.type == 'error') {
                    alert('Ошибка!');
                    return(false);
                }
                else {
                    var options = ''; 
                    
                    $(result.services).each(function() {
                        options += '<option value="' + $(this).attr('service_id') + '">' + $(this).attr('service_name') + '</option>';
                    });
                    
                    $('#services').html('<option value="0">Выберите услугу</option>'+options);
                    $('#services').attr('disabled', false);
                    $('#doctors').html('<option>Выберите врача</option>');
                    $('#doctors').attr('disabled', true);   
                            
                }
            },
            "json"
        );
    });
 
$('#services').change(function () {
        var med_spec = $('#med_spec').val();
        var services = $(this).val();
        if (services == '0') {
            $('#doctors').html('<option>Выберите врача</option>');
            $('#doctors').attr('disabled', true);
            return(false);
        }
        $('#doctors').attr('disabled', true);
        $('#doctors').html('<option>Загрузка...</option>');
        
        var url = 'get_doctor.php';
        
        $.post(
            url,
            "med_spec=" + med_spec,
            
            function (result) {
                if (result.type == 'error') {
                    alert('Ошибка!');
                    return(false);
                }
                else {
                    var options = ''; 
                    $(result.doctors).each(function() {
                        options += '<option value="' + $(this).attr('doctor_id') + '">' + $(this).attr('doctor_surname') + ', ' + $(this).attr('doctor_name') + '</option>'; 
                        
                    });
                    $('#doctors').html('<option value="0">Выберите врача</option>'+options);        
                    $('#doctors').attr('disabled', false);
    }
            },
            "json" 
        );
    });
 
//Отправка формы на сервер
    $('#InsertForm').submit(function(e) {
      e.preventDefault();
      $.ajax({
        type: $(this).attr('method'),
        url: 'insert.php',
        data: $(this).serialize(),
        success: function(result){
           $('.modal-wrapper').toggleClass('open');
 
           $('.page-wrapper').toggleClass('blur-it');
 
           $('div.modal-wrapper > div.modal > div.content > div.good-job > h1').html(result);
           return false;
        }
      });
    });
 
//Открытие и закрытие модального окна
    $('.trigger').on('click', function() {
 
       $('.modal-wrapper').toggleClass('open');
 
       $('.page-wrapper').toggleClass('blur-it');
 
       return false;
 
    });
});

CSS-стили для карусели (style.css):

#carousel { height:412px; padding-top:40px; overflow:hidden; background-color:#008000}
/* gallery */
    .roundabout-holder { height: 377px; width:915px; margin:0 auto;}
    .roundabout-moveable-item { height: 377px; width: 469px; cursor: pointer; }
    .roundabout-moveable-item img { width:100%; height:100%; display:block; }
    .roundabout-in-focus { cursor: auto; }
 
.btnPrev{ position:absolute; top:186px; left:182px; z-index:900}
.btnNext{ position:absolute; top:186px; left:806px; z-index:900}
/*footer*/
footer { color:#6b6b6b; font-size:0.75em; background:#fff}
footer .inside{ padding:35px 62px 130px 40px }
footer a {color:#6b6b6b; text-decoration:none}  
footer a:hover {  text-decoration:underline}
footer span{ color:#6b6b6b}
 
    
.indent-2{ position:relative; padding-left:20px; float:left}
.rowElem{ height:51px}
.rowElem1{ height:32px;}
.block-contact span{ float:right; margin-right:80px}

CSS-стили для формы (form-style.css):

.checkout {
  width:600px;
  margin: 50px auto;
  padding: 15px;
  background: #f3f6fa;
  border: 1px solid;
  border-color: #c2cadb #bbc5d6 #b7c0cd;
  border-radius: 7px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.checkout > p {
  zoom: 1;
}
.checkout > p:before, .checkout > p:after {
  content: '';
  display: table;
}
.checkout > p:after {
  clear: both;
}
.checkout > p + p {
  margin-top: 15px;
}
 
.checkout-header {
  position: relative;
  margin: -15px -15px 15px;
}
 
.checkout-title {
  padding: 0 15px;
  line-height: 38px;
  font-size: 13px;
  font-weight: bold;
  color: #7f889e;
  text-shadow: 0 1px rgba(255, 255, 255, 0.7);
  background: #eceff5;
  border-bottom: 1px solid #c5ccdb;
  border-radius: 7px 7px 0 0;
  background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3);
  -webkit-box-shadow: inset 0 1px white;
  box-shadow: inset 0 1px white;
}
.checkout-title:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
 
.checkout-price {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  font: 14px/40px Helvetica, Arial, sans-serif;
  color: white;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
  text-indent: -1px;
  letter-spacing: -1px;
  background: #e54930;
  border: 1px solid;
  border-color: #b33323 #ab3123 #982b1f;
  border-radius: 21px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: -webkit-linear-gradient(top, #f75a3b, #d63b29);
  background-image: -moz-linear-gradient(top, #f75a3b, #d63b29);
  background-image: -o-linear-gradient(top, #f75a3b, #d63b29);
  background-image: linear-gradient(to bottom, #f75a3b, #d63b29);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.checkout-price:before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px;
  border: 2px solid #f5f8fb;
  border-radius: 18px;
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25);
}
 
input {
  margin: 0;
  line-height: normal;
  font-family: inherit;
  font-size: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
.checkout-input {
  float: left;
  padding: 0 7px;
  height: 32px;
  color: #525864;
  background: white;
  border: 1px solid;
  border-color: #b3c0e2 #bcc5e2 #c0ccea;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, #f6f8fa, white);
  background-image: -moz-linear-gradient(top, #f6f8fa, white);
  background-image: -o-linear-gradient(top, #f6f8fa, white);
  background-image: linear-gradient(to bottom, #f6f8fa, white);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
}
.checkout-input:focus {
  border-color: #46aefe;
  outline: none;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;
}
.lt-ie9 .checkout-input {
  line-height: 30px;
}
 
.checkout-name {
  width: 150px;
}
 
.checkout-card {
  width: 210px;
}
 
.checkout-exp,
.checkout-cvc {
  margin-left: 15px;
  width: 45px;
}
 
.checkout-btn {
  width: 100%;
  height: 34px;
  padding: 0;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid;
  border-color: #1486f9 #0f7de9 #0d6acf;
  background: #1993fb;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6);
  background-image: -moz-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6);
  background-image: -o-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6);
  background-image: linear-gradient(to bottom, #4cb1fe, #229afc 40%, #138df6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.checkout-btn:active {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  border-color: #075bba #0c69d2 #0f7de9;
  background-image: -webkit-linear-gradient(top, #1281dc, #1593fc);
  background-image: -moz-linear-gradient(top, #1281dc, #1593fc);
  background-image: -o-linear-gradient(top, #1281dc, #1593fc);
  background-image: linear-gradient(to bottom, #1281dc, #1593fc);
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
}
 
:-moz-placeholder {
  color: #acb6c8 !important;
}
 
::-moz-placeholder {
  color: #acb6c8 !important;
  opacity: 1;
}
 
::-webkit-input-placeholder {
  color: #acb6c8;
}
 
:-ms-input-placeholder {
  color: #acb6c8;
}
 
::-moz-focus-inner {
  padding: 0 !important;
  border: 0 !important;
}

CSS-стили для модального окна (window-style.css):

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
 
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
 
.page-wrapper {
  width: 100%;
  height: 100%;
}
 
.blur-it {
  -webkit-filter: blur(4px);
          filter: blur(4px);
}
 
a.btn {
  width: 200px;
  padding: 18px 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  background: #e2525c;
}
 
.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  background: rgba(41, 171, 164, 0.8);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
 
.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}
 
.modal {
  width: 600px;
  height: 400px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
 
.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}
 
.head { 
  width: 90%;
  height: 32px;
  padding: 12px 30px;
  overflow: hidden;
  background: #e2525c;
}
 
.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
}
 
.content {
  padding: 10%;
}
 
.good-job {
  text-align: center;
  font-family: 'Montserrat', Arial,       Helvetica, sans-serif;
  color: #e2525c;
}
.good-job .fa-thumbs-o-up {
  font-size: 60px;
}
.good-job h1 {
  font-size: 20px;
  line-height: 1.5;
}

Выпадающие связанные списки работают, форма отправляется, открывая модальное окно и внося туда ответ от сервера, но окно закрыть я не могу. Когда я добавил в файл selects.js строки для открытия и закрытия модального окна,

    $('.trigger').on('click', function() {
 
       $('.modal-wrapper').toggleClass('open');
 
       $('.page-wrapper').toggleClass('blur-it');
 
       return false;
 
    });

у меня «зависла» галерея. Окно по-прежнему не закрывается, и не помогает даже preventDefault() для отмены действия по умолчаню. Скорее всего, тут «война скриптов», и кто кого «душит», я не знаю. Нужно ли выносить функции для галереи и модального окна в отдельные файлы? Где эти файлы располагать – в отдельной папке со скриптами или непосредственно в корневой папке сайта, и зависит ли быстрота исполнения скрипта от длины его пути? И над какими скриптами надо писать “async”, а над какими – “defer”? Извините за нубство, но я не знаю проритеты исполнения скриптов, а также как и с кем бороться. Собственного домена у меня нет, сайт на локалхосте. Извините, но придётся разворачивать вложения.

Прикрепленные изображения

  • экран-5.jpg
  • screen-2.jpg
  • модальное-окно.jpg

Прикрепленные файлы

  • Прикрепленный файл  stomkab.zip   3,87МБ   3 Количество загрузок:
  • Прикрепленный файл  sql.zip   119,07К   0 Количество загрузок:

  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1010
    3 658 сообщ.

Отправлено 10 Август 2018 в 00:23

Что в консоли браузера пишет? Есть там ошибки?

 

 


Нужно ли выносить функции для галереи и модального окна в отдельные файлы?

Вообще все скрипты рекомендуется выносить в отдельные файлы. Сайт будет грузиться чуть быстрее, особенно на медленном интернете.

Но это не должно влиять, не должно возникать проблем.

 

 


Где эти файлы располагать – в отдельной папке со скриптами или непосредственно в корневой папке сайта, и зависит ли быстрота исполнения скрипта от длины его пути?

Лучше распологать в отдельной папке, но это только лишь для вашего удобства, чтобы не было всё в одной куче.

На работу это не должно никак влиять.

 

 


И над какими скриптами надо писать “async”, а над какими – “defer”?

Во время разработки лучше не использовать, для удобства отладки. После окончания уже можно будет решать какие и как загружать. Подробно обо всём этом написано тут https://learn.javasc...external-script


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей