Блог

Главная - Вопросы по программированию - Как предотвратить загрузочный слайдер загрузки перед корректным отображением?

Как предотвратить загрузочный слайдер загрузки перед корректным отображением?

#html #css #bootstrap-4 #bootstrap-slider

#HTML #css #bootstrap-4 #загрузочный слайдер

Вопрос:

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

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

Вы можете проверить копию моего кода по адресу 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:

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

 input.slider {
  display: none;
}

пример => https://jsfiddle.net/a0wsg7mo /

Комментарии:

1. Это решает основную проблему, но поддерживает «медленный» (и не плавный) рендеринг. Есть другие идеи по улучшению этого?

2. JS необходимо создавать элементы после готовности DOM, пусть CSS подготовит элементы. Или добавьте display: none; в контейнер и исчезает после загрузки слайдера