三个奇怪的前端BUG
我的网站目前有几个奇怪的前端BUG一直无法得到解决。
第一个,就是顶部的sticky bar有一定的几率会不占高度。什么意思呢?就是你点开一篇文章,文章的标题和右侧的ABOUT与页面的Simin.Life导航栏是有一定间隔的,这个间隔有很小的概率会消失。我猜测是和jQuery的$(document).ready机制有关,因为jQuery的机制是在页面未加载完成时就开始生效,虽然可以提升加载速度,但是有可能会出现导航栏没有加载完毕就开始计算高度的情况,而传统js则是等待页面全部加载完成后才开始运行。但是目前我也不清楚具体是哪个代码导致了这个问题,所以只能是采用了一种比较坑爹的强制刷新的方法来尽量地减小这个概率,虽然有效,然而采用了这种方法代价就是我网站的锚点功能是不能自动生效的。如果你仔细观察的话就会发现,需要用到锚点的网页我是在页面顶部做了一个小的通知栏,点击通知栏可以跳转至锚点所在位置。锚点是不会自动跳转的。
第二个,就是主页的大图有一定的几率不显示。我的主页采用的是随机排版,每次刷新主页都会执行一次随机,在页面导航栏的下面,有50%的概率可以刷到一行小图片(Trending)和一行中等大小的图片(Carousel),还有50%的概率可以刷到一张大图片(Large),而这个大图有一定概率不显示。这个问题我真是毫无头绪,猜测可能是图片太大了网速跟不上就会不显示?
第三个,是手机端的浏览器有一个header的logo样式显示会不正常,我一共准备了三种header样式,三种引用的都是同一段logo的代码,但是相同的代码在不同的header里显示居然会出问题,由于手机端没有F12,这个bug我也不知道怎么回事,我现在暂时是把第三种header给屏蔽了。
等我有空了给每个bug截个图。
好在以上BUG无伤大雅,如果遇到了刷新一下就好了。有大佬知道问题出在哪里的可以指点我一下,感激不尽。