Question

我正在做一个网络调查，我必须为每个单独的页面加载几个bootstrap-slider，提交，然后移到下一个必须再次加载几个bootstrap-slider的页面。问题在于，每当页面加载时（紧接着按Submit后），它都会加载每个单独的bootstrap滑块（占用比其所需的像素更多的空间），然后才转换成应该呈现的方式。

有人对如何正确加载我的页面有任何建议吗？（即仅在“就绪”时才渲染它？）

您可以在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>

Answer 1

将css display: none;添加到您的输入选择器中，它将在javascript之前加载。

input.slider {
  display: none;
}

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

如何在正确渲染之前防止Bootstrap-Slider加载？

1 个答案: