swiper轮播图右侧不对齐,漏出第二张图的一部分

BUG简述

在仿小牛电动车官网首页样式时,当轮播图在我本地运行,第一次打开页面时,整个组件会向左挪动17PX
如图:

swiper轮播图右侧不对齐,漏出第二张图的一部分_第1张图片

当点击刷新、重新打开网站、或者点击切换轮播图时,此BUG就消失了,必须清楚所有缓存或者Ctrl+F5强制刷新才能复现BUG

BUG缘由

17PX应该为页面滚动条的宽度,BUG是由于页面个别元素是由JS文件动态修改的,过程中会获取当前网页的宽度,所以在JS尚未加载完成时,就会出现这个 BUG
当页面有缓存时,JS加载较快,就可以正确获取网页宽度。

BUG解决

我是在页面加载完成事件中手动赋值轮播图的偏移量一次,经过测试,只有在window.onload事件中才能正确获取页面宽度,问题解决。

你可能感兴趣的:(疑难杂症,WEB)