解决网页刷新时布局紊乱(jquery ready和load事件)
来源:互联网 发布:db2导入数据库命令 编辑:程序博客网 时间:2024/06/05 22:53
PC项目开发时遇到页面刷新时会出现2S左右的紊乱,会影响到用户体验;
那么要想直接给用户呈现一个完整的页面,而不在页面加载时就呈现给用户,一般要采用预加载,可以在整个页面都加载完毕时,然后再呈现给用户。
(页面加载时,最慢的还是一些脚本、图片,其中图片是主要问题);
解决短暂的页面布局紊乱,可以使用jquery的load事件,如下:
$("#fullback").hide();我的是一个大的div;一般直接写body就好;
也就是先把html的元素隐藏掉,接下来代码如下:
$(window).load(function () { $("#fullback").show();});
在load事件的回调函数内让元素显示,这样就解决了!
面试中好多时候会问ready和load谁先执行?答案是ready先执行,load后执行;
要想知道为什么是ready先执行,就得明白DOM文档加载的步骤:
1:解析HTML结构;
2:加载外部脚本和样式表文件;
3:解析并执行脚本代码;
4:构造HTML,DOM模型;===》ready
5:加载图片等外部文件;
6:页面加载完毕;===》load
如上所示 ready事件针对的是document对象,在DOM结构绘制完成之后就会执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。
而load事件可以针对window对象或者img这些部件加载元素,必须等到网页中所有内容全部加载完毕之后才被执行。
阅读全文
0 0
- 解决网页刷新时布局紊乱(jquery ready和load事件)
- jQuery中的ready和load事件(源码解析)
- jQuery中的ready和load事件
- jQuery load()和ready()
- jquery ready事件和javascript load事件区别
- jQuery中document的ready和load事件的区别?
- 【jQuery】onload事件,load(),ready()比较和使用
- 使用jquery解决页面在加载时出现短暂的布局紊乱
- jQuery中ready与load事件
- javascript ready和load事件的区别
- javascript ready和load事件的区别
- jQuery中ready和load的区别
- jquery $(document).ready()和$.load执行顺序
- jQuery中ready()和load()区别
- jquery中ready和load的区别
- jQuery内ready与load事件的区别
- jQuery内ready与load事件的区别
- jQuery内ready与load事件的区别
- Android 源码分析 —— 从 Toast 出发
- 36计详解
- mysql分组取每组前几条记录(排名) 附group by与order by的研究
- java相关知识
- js\jquery基础知识(一)
- 解决网页刷新时布局紊乱(jquery ready和load事件)
- springmvc获取resquest/response
- vue-router获取上一页面的url信息
- 平衡树:treap学习笔记(2)
- DataBinding框架学习
- 【银行】2016年中国银行信息科技岗 笔试+面试经验汇总
- 深度克隆
- 微信开放平台开发——网页微信扫码登录(OAuth2.0)
- PCIE 关于BAR的相关学习