jQuery进度条加载直到页面重定向

Posted 2023-03-16

【中文标题】jQuery进度条加载直到页面重定向

【英文标题】：jQuery progress bar load until page redirects

【发布时间】：2015-10-05 04:32:34

【问题描述】：

我有一个包含一些附属链接的网站，当点击链接时，用户会被带到我网站上的一个临时页面，这个页面上有一个隐藏的附属链接，在 1 秒后使用 jQuery 单击该链接。

我想显示 jQuery 加载栏进度，直到页面重定向到附属链接。我该怎么做？

【问题讨论】：

你有没有写代码让我们看看？我们喜欢代码

【参考方案1】：

是的，你可以试试类似的，

// for 10 intevals only and after that your affiliate link is clicked.
var i = 0,
    parts=20,
    interval=1000/parts;// for 1 second, I used 1000, you can change accordingly

var c = setInterval(function() 
  if (i++ > parts-1) 
    clearInterval(c);
    alert('link clicked now');
  
  p=Math.floor($('.progress').width()/parts);
  
  $('.progress-bar').width(p+$('.progress-bar').width());
, interval);

.progress 
  width: 100%;
  border: 1px solid #999;
  height: 20px;
  border-radius: 3px;

.progress-bar 
  width: 0;
  background-color: green;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div class="progress-bar">&nbsp;</div>
</div>

你也可以试试https://css-tricks.com/css3-progress-bars/和https://css-tricks.com/html5-progress-element/

【讨论】：

感谢这是有效的，但只加载了大约 20% 的栏，然后重定向 - 可能是我的错误在某处

警报显示，栏在 10 - 20% 处停止，然后重定向

我更改了零件 = 5，效果更好，负载 60-70%

parts用于将整体进度划分为子进度，使用1只会一次性加载进度，所以使用20更好查看。您也可以将其更改为 5 或 10，并且在我结束时效果很好