网页加载条怎么写啊？？

刘浩然 2021-04-29 00:10

我给楼主说一下思路吧

如果是瀑布流加载，首先要全局监听scroll事件，当页面滚动的时候，获取页面的scrollTop值，当scrollTop的值达到某个定值的时候时候异步去请求后开发者_开发百科端，请求到的数据在append的页面里就可以了。

如果像慕课网那样的动画，可以考虑用fullpage插件，到滚动到每一个位置的时候调用一个事件函数执行动画

---

袁吉文 2021-0开发者_开发知识库4-29 00:14

通常是在body结束标签之前将进度条改为100%就行了。

直接判断页面加载完成，这个没法做到。。

---

钟琦 2021-04-29 00:15

开发者_StackOverflow 简单说一下实现原理吧html部分：首先写用两个块级元素（如div），一个用于显示总的加载时长（下面简称wrap），一个用于显示当前的加载进度（下面简称pro），用wrap包裹pro元素。css部分：wrap和pro高度相同，wrap宽度写死，pro初始宽度为0。pro一般要带个背景色（想做好看点可以用gif图片代替）js部分：首先你肯定能监控到当前的加载进度的吧（要不然这效果没法做了）。设置一个setInterval函数用来控制进度条的显示。该函数主要用于计算用户显示的百分比，然后利用当前进度百分比算出pro的对应宽度，再直接把宽度设置到pro里就行了。这是我自己之前写的一个文件上传的进度显示的实现原理。仅供参考 查看原帖>>

---

朱琳 2021-04-29 00:17

一般这种网站都是图片特别多而且质量很高导致加载慢。

所以 我们基本监听图片加载进度就可以达到比较好的效果。

而图片我们可以采用预加载 （也就是浏览器可以缓存，到真的要用的时候会自动从缓存读取）

那么我们只要检测预加载图片的进度就可以了 代码基本如下：

var imgs = ["1.jpg","2.jpg"];

for(var i=0;i var img = new Image()

开发者_如何学Go img.onload = function(){

//图片加载完毕 此时更新进度条

}

img.src = imgs[i];

}

---

曾畅宇 2021-04-29 00:18

开发者_JAVA技巧 我这有个纯css的进度条代码，你自己看看吧

百分比进度条样式:

50%

---

碧池 2021-04-29 00:27

这里手动跳转

---