无框架,用jq和原生写的移动端页面,导航条切换时候会抖动,并且内容加载速度较慢,等图片加载完,导航条的文字才会出现
-
问题如图与标题所示,各位路过的大神请帮忙出一下优化加载的方法,以及抖动原因,图片压缩过一次了。。谢谢谢谢,小弟不胜感激 -
内容加载慢的问题,用谷歌浏览器打开页面,打开调试工具,然后切换到 network
观察页面请求是否有挂住的情况(加载进度有灰条),如果有挂住的资源查看加载原因,有可能是你引入了第三方的cdn上的插件库导致的解决页面加载完以后导航才出现这个问题
应该是你控制导航选中的js代码有延迟,建议把延迟去掉,直接页面进入就设置导航样式,千万不要用setTimeout这一类去做延迟,setTimeout会把代码放到后面去执行,所以为了加快js代码执行时间可以这样修改控制导航的代码
// 在页面底部写或者在页面引入的js文件中编写 $(function() { // 在这里写控制导航条的代码,注:去掉 setTimeout })
解决导航切换的时候抖动的问题
从图片上看,你的导航抖动是因为导航条下方的蓝色border导致的,因为活动的导航条有边框,而未活动的导航条无边框,这样就会导致,当活动的导航条加了边框以后,文字的位置和其它导航条的位置有少许偏差,视觉上就会造成抖动的问题。
图中我们可以看到产业规划明显比其它导航的文字网上偏了一点,所以解决方案如下
给每个导航都加入边框,默认边框颜色为白色,或者透明色,这样肉眼就看不到边框,也能让到所有导航的文字都保持在一个高度上,只给活动的导航设置边框的颜色,这样就可以解决网页抖动的问题啦!
首先可以将你的网站部署到一个外网可以访问的地址
按照这篇教程进行优化 -
请求的是这样的一个情况 -
目测你有两个字体过大,17M,这个字体没有必要的话,可以去掉了,不然手机上一下子要加载17M的内容的话,确实不快,如果非要用字体的话,可以考虑用 字蛛 这一类工具把字体体积缩小
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏