如何防止Bootstrap-Slider在正确渲染前加载？
如何防止Bootstrap-Slider在正确渲染前加载？
提问于 2019-04-09 18:00:09
我正在做一个网络调查，我必须为每个单独的页面加载几个引导程序滑块，提交，然后移动到下一个，我必须再次加载几个引导程序滑块。问题是，无论何时加载页面(就在按下submit之后)，它都会加载每个单独的引导滑块(占用的像素空间比所需的更多)，然后才会捕捉到它应该呈现的方式。
关于如何正确加载我的页面，有人有什么建议吗？(例如，只有当它“就绪”时才呈现它？)
您可以在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
Stack Overflow用户
发布于 2019-04-09 18:12:10
将css display: none;添加到您的输入选择器中，它将在javascript之前加载。
input.slider {
display: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55590100
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号