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

关键词：

【中文标题】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，并且在我结束时效果很好

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现。如下图，在页面加载的时候，上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是... 查看详情

显示进度条，直到 UITableView 加载所有 Cell

】显示进度条，直到UITableView加载所有Cell【英文标题】：ShowprogressBaruntilUITableViewloadallCell【发布时间】：2021-11-0605:05:32【问题描述】：我正在使用Swift5构建一个应用程序。我用UITableView创建了一个视图。我需要显示进度条，直到... 查看详情

带进度条的重定向

avaScript跳转方法一:<scriptlanguage="javascript">    window.location="http://www.baidu.com";</script>方法二:<scriptlanguage="javascript">    document. 查看详情

用jquery实现页面loading的效果，即：当页面加载完成前显示loading的进度条，全部加载完成之后进度条消失

二楼的方法不是常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用flex更好... 查看详情

进度条，直到从服务器加载数据

】进度条，直到从服务器加载数据【英文标题】：Progressbaruntiltheloadofdatafromserver【发布时间】：2016-12-1015:16:28【问题描述】：publicclassRecyclerviewextendsAppCompatActivityprivateRecyclerViewmRecyclerView;CustomAdaptercu;ArrayList<Employee>arr,ar 查看详情

前端页面加载进度条的制作

参考技术A我们在前端页面开发过程中，经常会遇到图片，音频，视频等加载慢问题。这样对用户体验来说体验是很不好的。因此我们可以在页面加载时用一个加载动效来表示，当加载完成的时候，再来显示内容。推荐一个制作... 查看详情

如何将用户重定向到 div 上的新页面单击 JQuery [重复]

】如何将用户重定向到div上的新页面单击JQuery[重复]【英文标题】：HowtoredirectusertonewpageondivclickJQuery[duplicate]【发布时间】：2019-01-0718:05:38【问题描述】：如何根据点击的div加载新URL。每个div都有自己的加载URL（在我的实现中，di... 查看详情

如何只实现一个圆形进度条，直到图像被滑动加载

】如何只实现一个圆形进度条，直到图像被滑动加载【英文标题】：Howtoimplementonlyonecircularprogressbaruntilimagesareloadedwithglide【发布时间】：2021-08-2406:49:15【问题描述】：您好，我只想实现一个圆形进度动画，直到从滑行加载图像，... 查看详情

文件上传进度条干扰控制器重定向

】文件上传进度条干扰控制器重定向【英文标题】：FileuploadprogressbarinterfereswithControllerredirect【发布时间】：2021-11-1610:23:43【问题描述】：我有一个文件提交表单和一个跟踪上传进度的进度条。但是，控制进度条的javascript会干扰... 查看详情

加载另一个页面后重定向到一个页面后

】加载另一个页面后重定向到一个页面后【英文标题】：AfterRedirectingtoapageafterloadinganotherpage【发布时间】：2017-06-0817:33:40【问题描述】：目前我有一个页面，当您填写文本框并单击按钮时，它会将您重定向到另一个页面。需要... 查看详情

重定向并重新加载，即使是同一页面

】重定向并重新加载，即使是同一页面【英文标题】：RedirectANDreloadevenifsamepage【发布时间】：2016-04-0109:24:37【问题描述】：确保页面重定向到另一个页面并确保即使目标页面是当前页面也能刷新页面的最简单/最佳方法是什么。... 查看详情

检测浏览器是不是正在执行重定向

】检测浏览器是不是正在执行重定向【英文标题】：Detectifbrowserisperformingaredirect检测浏览器是否正在执行重定向【发布时间】：2015-11-2721:56:48【问题描述】：在我的项目中，每次出现错误时都会显示一条警告消息。这不是什么花... 查看详情

vue----页面加载进度条

参考技术A我测试使用的是脚手架2有的时候当我们页面请求数据较慢的时候，我们就需要让页面有个加载进度条，让用户体验感更加友善 查看详情

AngularJS - 如何在整个页面加载时进行重定向？

】AngularJS-如何在整个页面加载时进行重定向？【英文标题】：AngularJS-HowcanIdoaredirectwithafullpageload?【发布时间】：2013-04-0620:20:26【问题描述】：我想做一个重新加载整个页面的重定向，以便在页面加载时刷新来自我的网络服务器... 查看详情

在加载默认页面之前重定向索引页面请求？

】在加载默认页面之前重定向索引页面请求？【英文标题】：RedirectanIndexPageRequestbeforetheDefaultPagehasbeenloaded?【发布时间】：2020-09-1422:54:04【问题描述】：我有以下情况。我有一个wordpress网站正在运行。该网站有以下网址：www.examp... 查看详情

如何检测初始页面加载是不是来自重定向

】如何检测初始页面加载是不是来自重定向【英文标题】：Howtodetectifinitialpageloadwasfromaredirect如何检测初始页面加载是否来自重定向【发布时间】：2018-05-1604:55:11【问题描述】：我有一个reactjs应用程序，它使用firebase对用户进行... 查看详情

创建 jQuery 验证并将页面重定向到其他地址

】创建jQuery验证并将页面重定向到其他地址【英文标题】：createjQueryvalidationandredirectpagetootheraddress【发布时间】：2011-10-1221:53:19【问题描述】：如何创建一个jQuery验证，在单击按钮提交页面后重定向到另一个地址？请给我一个例... 查看详情

带进度条的重定向

...; document.location="http://www.baidu.com";</script> （带进度条）<html><head><metahttp-equiv="Content-Language"content="zh-cn"><metaHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=gb2312"><title>跳转到baidu.com</title></head><... 查看详情