网页中常用加载页面的实现原理
本文主要是来分析加载页面的实现原理,因为好的加载页面可以提高用户访问的兴趣度,也能让用户远离枯燥的等待;根据网页上各种加载页面,大概总结了下面几种比较常用的实现方法:
1.利用定时器实现加载页面;
2.利用readyState判断实现加载页面;
3.利用滚动条+readyState判断实现加载页面;
4.利用滚动条+onload实现加载页面;
5.利用百分比增加+onload实现加载页面。
利用定时器实现加载页面
html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。
Tips:加载页面的动画效果是图标进行旋转,可根据实际情况修改成属于自己的动画效果(现在很多网页的动画效果都不错,可进行参考)。
实现原理是利用了定时器(setTimeout)功能,对加载页面显示3s(3000),然后消失隐藏。
Tips:缺点就是由于写死了显示时间,所以图片太大加载比较慢,会导致加载页面隐藏了,但是图片还未全部加载完;或者图片太小加载比较快,又会导致多等待时间。
利用readyState判断实现加载页面
html和css跟第一种方法共用,可自行查看上面的代码。
实现原理是利用了页面加载状态改变时的事件(onreadystatechange),判断readyState的状态如果是载入完成(complete),则隐藏加载页面。
利用滚动条+readyState判断实现加载页面
html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。
Tips:只贴出不同于第一种方法的css样式。
实现原理是利用animate让滚动条先显示到90%(运行时间1s),然后判断readyState的状态如果是载入完成(complete),则让滚动条显示到100%并隐藏加载页面。
Tips:适合于打开就想要一个交互体验的用户。
利用滚动条+onload实现加载页面
html和css跟第三种方法共用,可自行查看上面的代码。
实现原理详细步骤如下:
1.首先使用$.each方法遍历图片数组(imgArray)来获取图片的地址(val);
2.然后使用Image的onload方法,每加载完一张图片数量就加1(count++);
3.最后使用animate显示滚动条的宽度(Math.round(count / len * 100) + '%'),实现滚动条一个动态加载的过程;当全部图片加载完毕后(count >= len),隐藏加载页面。
利用百分比增加+onload实现加载页面
html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。
Tips:百分比的外框利用round进行旋转。
实现原理详细步骤如下:
1.首先使用$.each方法遍历图片数组(imgArray)来获取图片的地址(val);
2.然后使用Image的onload方法,每加载完一张图片数量就加1(count++);
3.最后把计算出的百分比(Math.round(count / len * 100) + '%')替换span的html内容,实现百分比动态变化过程;当全部图片加载完毕后(count >= len),隐藏加载页面。
网页中常用加载页面的实现原理相关推荐
- python requests 动态加载_Python获取网页中动态加载的数据
Python获取网页中动态加载的数据 0.XHR 是什么? XHR是 XMLHttpRequest 对象.既Ajax功能实现所依赖的对象,在JQuery中的Ajax是对 XHR的封装. 1.查看异步加 ...
- qml中loader加载页面会闪屏_Qml动态语言切换
此方法需要在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现 重要的事情说三遍 首先在工程文件.pro中加入TRANSLATIONS = zh_CN.ts ...
- android webview白屏,Android中WebView加载页面出现白屏解决方案
首先在WebViewClient中添加 @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, ...
- 优化CSS在网页中的加载方式
点评:1.应该将 CSS 放置于结构的上方(一般放置于 head 元素内).CSS 是解释型语言,Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西.只有将 CSS 前置,才可在浏 ...
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
- vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...
- 在javascript中重新加载/刷新页面的不同方法
使用历史记录对象 我们可以使用浏览器历史记录方法刷新当前页面..go() <input type="button" value = "Refresh" o ...
- js页面中实现加载更多功能
js页面中实现加载更多功能 分页-如何实现加载更多功能,目前的在很多网站上使用的加载更多功能中,使用最多的是iscroll.js实现的上拉加载更多.下拉刷新功能.但是iscroll.js本身并没有集成 ...
- Twebbrowser从内存中加载页面
//从内存中加载页面(比加载htm文件速度快)uses ActiveX; procedure WBLoadHTML(WebBrowser: TWebBrowser; HTMLCode: tstring ...
- android webview加载不出来,【新手有关问题】Android浏览器中WebView加载不出网页
当前位置:我的异常网» Android » [新手有关问题]Android浏览器中WebView加载不出网 [新手有关问题]Android浏览器中WebView加载不出网页 www.myexcepti ...
最新文章
- 两步完成项目定时启动,java项目定时启动
- 使用Python分析姿态估计数据集COCO的教程
- matplotlib如何把坐标轴一横一竖给绘制出来
- javascript: new Date(string)在IE中显示NaN的问题!
- 调试寄存器(debug registers, DRx)理论及实践
- java xml 变量替换_Java JAXB如何将XmlElements重新定义为现有变量
- 为什么谐振时电抗为0_变频串联谐振试验装置的接线原理
- java remote desktop_Remote Desktop
- 代码自解释不是不写注释的理由
- 不能将参数转化为lparam_如何将管理需求转化为信息化方案
- 彻底理解position与anchorPoint - Wonderffee's Blog(转)
- html 【一个简单的用户登录页面代码】
- CAD贱人工具箱插件
- Lightbox图片展示特效
- EditPlus常用技巧
- linux 培训感谢信,应用文(考试)应用文(考).doc
- 2017-2018-2 20179215《网络攻防实践》第二周作业
- 夜神模拟器-软件apk存放目录
- ROS学习笔记-创建订阅cmd_vel话题节点
- POI导出excel出现excel无法打开文件“xxx.xlsx”,因为文件格式或文件扩展名无效的问题