我想基于滚动网页制作一种幻灯片。
我的问题是我的图像宽度为p87格式的78720x1015px。 图像的宽度由1920px的单个图像确定，其是彼此相邻排列的41倍。 - 它应该像一个卡通图像移动100％（边距：-100％）并产生一种电影的感觉。
但是，这会导致图像宽度为1920px x 41pics = 78720px。
这是一个巨大的宽度，但我想知道的是文件大小只有975kB，在我看来不是那么大！？ - 但是，不知何故，在Webbrowser中加载图片需要很长时间，而且图像质量不如桌面上的ImageViewer那么高。
问题1：处理如此大的图像宽度时我需要考虑什么？有什么限制？
问题2：有没有更好的方式制作这种幻灯片？ - 考虑滑动本身不应该是可见的。它应该像一部基于约40张照片的电影。
提前致谢！
答案 0 :(得分：1)
PNG非常好压缩，特别是如果它像你说的那样只能使用有限数量的颜色。
但是，当加载到内存中时，设备必须将所有像素数据加载到RAM中以显示它。在您的情况下，这几乎是8000万像素，这将是大约320Mb的未压缩数据。这可能是浏览器挣扎的原因，尤其是如果您使用margin来移动它，因为这需要完全重新绘制图像。
使用transform可能会获得更好的结果，因为这应该使用硬件加速，并且还可以避免重绘的重排部分，因为转换不会影响页面布局。
但更好的解决方案是将其分解为单个图像。让你的代码加载到下一个图像中，滚动它，然后在滚动时加载下一个代码并卸载现在离屏的那个，以提供相对无缝的视图。