无框架,用jq和原生写的移动端页面,导航条切换时候会抖动,并且内容加载速度较慢,等图片加载完,导航条的文字才会出现



  • QQ图片20200902154349.png QQ图片20200902154343.png
    问题如图与标题所示,各位路过的大神请帮忙出一下优化加载的方法,以及抖动原因,图片压缩过一次了。。谢谢谢谢,小弟不胜感激



  • 内容加载慢的问题,用谷歌浏览器打开页面,打开调试工具,然后切换到 network
    观察页面请求是否有挂住的情况(加载进度有灰条),如果有挂住的资源查看加载原因,有可能是你引入了第三方的cdn上的插件库导致的

    efd51f7e-f55f-4b60-9833-f2ac2a6c933a-image.png

    解决页面加载完以后导航才出现这个问题

    应该是你控制导航选中的js代码有延迟,建议把延迟去掉,直接页面进入就设置导航样式,千万不要用setTimeout这一类去做延迟,setTimeout会把代码放到后面去执行,所以为了加快js代码执行时间可以这样修改控制导航的代码

    // 在页面底部写或者在页面引入的js文件中编写
    $(function() {
       // 在这里写控制导航条的代码,注:去掉 setTimeout
    })
    

    解决导航切换的时候抖动的问题

    从图片上看,你的导航抖动是因为导航条下方的蓝色border导致的,因为活动的导航条有边框,而未活动的导航条无边框,这样就会导致,当活动的导航条加了边框以后,文字的位置和其它导航条的位置有少许偏差,视觉上就会造成抖动的问题。

    720e7138-6db0-4151-8c3d-0078821121cd-image.png

    图中我们可以看到产业规划明显比其它导航的文字网上偏了一点,所以解决方案如下

    给每个导航都加入边框,默认边框颜色为白色,或者透明色,这样肉眼就看不到边框,也能让到所有导航的文字都保持在一个高度上,只给活动的导航设置边框的颜色,这样就可以解决网页抖动的问题啦! 🤤

    首先可以将你的网站部署到一个外网可以访问的地址
    按照这篇教程进行优化

    https://xnit.funtask.club/topic/75/



  • QQ图片20200903095012.png
    请求的是这样的一个情况



  • 目测你有两个字体过大,17M,这个字体没有必要的话,可以去掉了,不然手机上一下子要加载17M的内容的话,确实不快,如果非要用字体的话,可以考虑用 字蛛 这一类工具把字体体积缩小

    5774e24e-7388-437d-8000-d6c5d07489ae-image.png


Log in to reply