Оптимизация HTML для развертывания в качестве виджета - PullRequest
Новая
       9

Оптимизация HTML для развертывания в качестве виджета

0 голосов
/ 26 апреля 2019

Мне нужно встроить это в виджет HTML на веб-сайте, и загрузка занимает слишком много времени, из-за чего время ожидания браузера истекает.Я старался изо всех сил, чтобы уменьшить нагрузку, но это по-прежнему слишком много для моего веб-хостинга.Любые предложения или изменения для оптимизации этого будут высоко оценены.Я включаю полную HTML-программу, которую я сейчас внедряю как виджет, чтобы получить полную картинку. 

<!DOCTYPE html>
<html>
  <head>
    <title>Quiz</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
  @font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 200;
    src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v10/If2RXTr6YS-zF4S-kcSWSVi_szLgiuE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  .container {
    font-family: 'Dancing Script';
    color: red;
    background: none;
    border: none;
    text-align: center;
    font-style: lighter;
  }

  body {
    margin: auto;
    line-height: 1.5;
  }

  a {
    font-family: 'Dancing Script';
    font-style: normal;
    text-decoration: none;
    color: red;
  }

  input {
    font-family: 'Dancing Script';
    color: red;
    background: none;
    border: none;
    text-align: center;
    border-bottom: red solid 0.05px;
  }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body class="container">
    <div>
      <main>
        <form class="questionForm" id="q1" data-question="1">
          <h3>In 1936, this famously cantankerous illusion designer self published and self titled a Magic and Stagecraft Technical.</h3>
          <input name="q1" type="text" size="25" maxlength="11"><br>
          <button id="submit">Submit</button>
        </form>
        <div id="result"></div>
      </main>
    </div>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      var correct = false;

  //Initializer
  function init(){
    //set correct answers
    sessionStorage.setItem('a1','Guy Jarrett'.toLowerCase());
    sessionStorage.setItem('a2','1881'.toLowerCase());
    sessionStorage.setItem('a3','Jim Steinmeyer'.toLowerCase());
    sessionStorage.setItem('a4','Technique and Understanding'.toLowerCase() || 'Technique & Understanding'.toLowerCase());
    sessionStorage.setItem('a5','Andrew Evans'.toLowerCase());
  }

  $(document).ready(function(){
    $('.questionForm #submit').hide();
    $('.questionForm').hide();
    $('.questionForm').fadeIn(750);
    $('.questionForm #submit').click(function(){
      //Get question number
      qnum = $(this).parents('form:first').data('question');
      // console.log(qnum)
      process(''+qnum+'');
      return false;
    });
  });

  //Process the answers
  function process(n){
    //Get input value
    var submitted = $('input[name=q'+n+']').val().toLowerCase();

    if(submitted == sessionStorage.getItem('a'+n+'')){
        correct = true;
    }
    else{
      correct = false;
    }

    if(correct == false){	
      $('input[name=q'+n+']').val("");
      $('#result').hide();
      $('#result').fadeIn(500);
      $('#result').delay(500).html('<h3>Try Again</h3>');
      $('#result').delay(1500).fadeOut(1500);
    }
    else{
      window.location.replace("https://cueriousity.com/"+(parseInt(n)+1)+"");
    }
    return false;
  }

  //Add event listener
  window.addEventListener('load',init,false);
    </script>
  </body>
</html>
...