Как предотвратить загрузку Bootstrap-Slider перед правильным рендерингом? - PullRequest
Новая
       23

Как предотвратить загрузку Bootstrap-Slider перед правильным рендерингом?

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

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

У кого-нибудь есть предложения, как правильно загрузить мою страницу?(то есть рендеринг только тогда, когда он «готов»?)

Вы можете проверить копию моего кода в https://jsfiddle.net/MRT77/crmhqbaz/5/.

HTML 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.1/css/bootstrap-slider.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.css">
    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-uhut8PejFZO8994oEgm/ZfAv0mW1/b83nczZzSwElbeILxwkN491YQXsCFTE6+nx" crossorigin="anonymous">
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <div class="container my-container">
      <form action="/submit-testSlim" method="post">
        <div class="form-group row my-row my-row-slider">
          <div class="col-5 text-right my-col">
            <label class="control-label" for="0" data-toggle="tooltip" data-placement="top" > </label>
          </div>
          <div class="col-7 my-col">
            <input class="slider form-control" id="0" name="0" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
          </div>
        </div>
        <div class="form-group row my-row my-row-slider">
          <div class="col-5 text-right my-col">
            <label class="control-label" for="1" data-toggle="tooltip" data-placement="top" > </label>
          </div>
          <div class="col-7 my-col">
            <input class="slider form-control" id="1" name="1" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
          </div>
        </div>
        <div class="form-group row my-row my-row-slider">
          <div class="col-5 text-right my-col">
            <label class="control-label" for="2" data-toggle="tooltip" data-placement="top" > </label>
          </div>
          <div class="col-7 my-col">
            <input class="slider form-control" id="2" name="2" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
          </div>
        </div>
        <div class="form-group row my-row my-row-slider">
          <div class="col-5 text-right my-col">
            <label class="control-label" for="3" data-toggle="tooltip" data-placement="top" > </label>
          </div>
          <div class="col-7 my-col">
            <input class="slider form-control" id="3" name="3" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
          </div>
        </div>
        <div class="form-group row my-row my-row-slider">
          <div class="col-5 text-right my-col">
            <label class="control-label" for="4" data-toggle="tooltip" data-placement="top" > </label>
          </div>
          <div class="col-7 my-col">
            <input class="slider form-control" id="4" name="4" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
          </div>
        </div>
        <button class="btn btn-primary" type="button">SUBMIT</button>
      </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.1/bootstrap-slider.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js"></script>
    <script src="/javascripts/script.js"></script>
  </body>
</html>

1 Ответ

1 голос
/ 09 апреля 2019

Добавьте css display: none; в ваш селектор ввода, он будет загружен до JavaScript. 

input.slider {
  display: none;
}

ex => https://jsfiddle.net/a0wsg7mo/

...