文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在加载后加载脚本

问如何在加载后加载脚本
EN

Stack Overflow用户

提问于 2022-09-06 22:43:03

回答 1查看 63关注 0票数 0

在onload加载程序动画完成后，我正在尝试使进度条加载(动画)，下面是一个指向正常动画的进度条示例的链接：JSFiddle

&下面是加载程序onload的一个示例：JSFiddle，在这个示例中，您可以看到进度条动画是如何正常工作的。

最初我以为进度条动画发生在onload加载器后面，但是如果我降低加载器的秒数，我可以看到进度条动画根本不起作用

任何帮助都是非常感谢的！

javascript

html

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-07 00:46:22

在加载页面时触发加载栏动画，而需要在加载动画完成后移动触发器才能运行。

let $radios

const radioChange = () => {
  let progress_value = 0
  $radios.filter(':checked').each( function() {
    progress_value += Number($(this).data('progress'))
  })
  console.log(progress_value)
  $(".progress-value").width(progress_value + '%')
}

$(document).ready(function() {
  $radios = $('input[type="radio"]')
  $radios.change(radioChange);
})

var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 500);
}
function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
  setTimeout( () => $radios.first().change(), 20 )
}

.progress {
  background: rgba(255, 255, 255, 0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  display: flex;
  height: 10px;
  width: 100%;
  margin-bottom: 10px;
}
.progress-value {
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #0d6efd;
  height: 30px;
  width: 0;
  transition: width 2s;
}



/* Center the loader */
#loader {
  position: absolute;
  left: 47%;
  top: 44%;
  z-index: 1;
  width: 120px;
  height: 120px;
  border: 16px solid #333;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@media(max-width:768px){
  #loader{
    left:35% !important;
    top:40% !important;
  }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<body onload="myFunction()" style="margin:0;">

  <div id="loader"></div>

  <div class="whole animate-bottom" id="myDiv" style="display:none;">

    <div class="wrappy">
      <br><br>
      <div class="progress">
        <div class="progress-value"></div>
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        <input type="radio" style="display:none;" id="js1" data-price="146.99" value="option1a" name="ONE" data-progress="50" checked>
        <label for="js1" onclick="">
          Option 1a (Default 50%)
        </label>
      </div>
      <div class="col-6">
        <input type="radio" style="display:none;" id="js2" data-price="123.99" value="option2a" name="ONE" data-progress="75">
        <label for="js2" onclick="">
          Option 2a (75%)
        </label>
      </div>
    </div>

  </div>

</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73628433

复制

相似问题

问如何在加载后加载脚本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在加载后加载脚本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在加载后加载脚本
EN