我正在构建的网站有4个大的背景图像,占用了用户浏览器的整个高度和宽度.它们被实现为CSS背景div.问题是,当在较大的屏幕尺寸上滚动时,它非常滞后且不连贯.当用户按下按钮时,这些图像之间的滚动是通过JavaScript自动完成的,所以这是我网站核心功能的一部分,我必须找到一种方法来防止延迟.
到目前为止,我已经尝试通过JS预加载图像并将图像从PNG转换为JPEG(增加压缩并降低质量)服务器端.这些都没有奏效.
图像的最小高度可以是630像素.如何在部分之间滚动时防止延迟？
这是我的代码:
CSS:
body { height: 100%; margin: 0px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
.area { height: 630px; border: 0px solid red; background: repeat-x; margin-bottom: 0px; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: Av, Helvetica, Arial, sans-serif; color: #292E37; font-weight: lighter; }
#top { position: fixed; width: 100%; height: 10%; background: #292E37; box-shadow: inset 0px -1px 5px #000; z-index: 1000; }
#navigation { float: right; height: 100%; }
#bottom { …