0

我正在做一个网络调查，我必须为每个单独的页面加载几个引导滑块，提交然后移动到下一个我必须再次加载几个引导滑块的地方。问题是，无论何时加载页面（在按下提交之后），它都会加载每个单独的引导滑块（占用比它需要的更多的像素空间），然后再进入它应该呈现的方式。

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

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

1 回答 1

1

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

input.slider {
  display: none;
}

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

于 2019-04-09T10:12:09.527 回答