网页加载条怎么写啊？？
我想问下，网页加优艾设计网_设计模板载条怎么写啊，在线等。。。
刘浩然 2021-04-29 00:10 我给楼主说一下思路吧如果是瀑布流加载，首先要全局监听scroll事件，当页面滚动的时候，获取页面的scro优艾设计网_设计LOGOllTop值，当scrollTop的值达到某个定值的时候时候异步去请求后端，请求到的数据在append的页面里就可以了。如果像慕课网那样的动画，可以考虑用fullpage插件，到滚动到每一个位置的时候调用一个事件函数执行动画
袁吉文 2021-04-29 00:14 优艾设计网_在线设计 通常是在body结束标签之前将进度条改为100%就行了。直接判断页面加载完成，这个没法做到。。
钟琦 2021-04-29 00:15 优艾设计网_设计圈 简单说一下实现原理吧html部分：首先写用两个块级元素（如div），一个用于显示总的加载时长（下面简称wrap），一个用于显示当前的加载进度（下面简称pro），用wrap包裹pro元素。css部分：wrap和pro高度相同，wrap宽度写死，pro初始宽度为0。pro一般要带个背景色（想做好看点可以用gif图片代替）js部分：首先你肯定能监控到当前的加载进度的吧（要不然这效果没法做了）。设置一个setInterval函数用来控制进度条的显示。该函数主要用于计算用户显示的百分比，然后利用当前进度百分比算出pro的对应宽度，再直接把宽度设置到pro里就行了。这是我自己之前写的一个文件上传的进度显示的实现原理。仅供参考 查看原帖>>
朱琳 2021-04-29 00:17 优艾设计网_PS交流 一般这种网站都是图片特别多而且质量很高导致加载慢。所以 我们基本监听图片加载进度就可以达到比较好的效果。而图片我们可以采用预加载 （也就是浏览器可以缓存，到真的要用的时候会自动从缓存读取）那么我们只要检测预加载图片的进度就可以了 代码基本如下： var imgs = ["1.jpg","2.jpg"]; for(var i=0;i var img = new Image() img.onload = function(){ //图片加载完毕 此时更新进度条 } img.src = imgs[i];}
曾畅宇 优艾设计网_设计百科 2021-04-29 00:18 我这有个纯css的进度条代码，你自己看看吧
碧池 2021-04-29 00:27 这里手动跳转
刘浩然 2021-04-29 00:10 我给楼主说一下思路吧如果是瀑布流加载，首先要全局监听scroll事件，当页面滚动的时候，获取页面的scro优艾设计网_设计LOGOllTop值，当scrollTop的值达到某个定值的时候时候异步去请求后端，请求到的数据在append的页面里就可以了。如果像慕课网那样的动画，可以考虑用fullpage插件，到滚动到每一个位置的时候调用一个事件函数执行动画
袁吉文 2021-04-29 00:14 优艾设计网_在线设计 通常是在body结束标签之前将进度条改为100%就行了。直接判断页面加载完成，这个没法做到。。
钟琦 2021-04-29 00:15 优艾设计网_设计圈 简单说一下实现原理吧html部分：首先写用两个块级元素（如div），一个用于显示总的加载时长（下面简称wrap），一个用于显示当前的加载进度（下面简称pro），用wrap包裹pro元素。css部分：wrap和pro高度相同，wrap宽度写死，pro初始宽度为0。pro一般要带个背景色（想做好看点可以用gif图片代替）js部分：首先你肯定能监控到当前的加载进度的吧（要不然这效果没法做了）。设置一个setInterval函数用来控制进度条的显示。该函数主要用于计算用户显示的百分比，然后利用当前进度百分比算出pro的对应宽度，再直接把宽度设置到pro里就行了。这是我自己之前写的一个文件上传的进度显示的实现原理。仅供参考 查看原帖>>
朱琳 2021-04-29 00:17 优艾设计网_PS交流 一般这种网站都是图片特别多而且质量很高导致加载慢。所以 我们基本监听图片加载进度就可以达到比较好的效果。而图片我们可以采用预加载 （也就是浏览器可以缓存，到真的要用的时候会自动从缓存读取）那么我们只要检测预加载图片的进度就可以了 代码基本如下： var imgs = ["1.jpg","2.jpg"]; for(var i=0;i var img = new Image() img.onload = function(){ //图片加载完毕 此时更新进度条 } img.src = imgs[i];}
曾畅宇 优艾设计网_设计百科 2021-04-29 00:18 我这有个纯css的进度条代码，你自己看看吧
百分比进度条样式:
50%
碧池 2021-04-29 00:27 这里手动跳转