我想创建一个全屏时间轴web应用程序,它可以左右水平滚动,显示一些html和css格式的文本,可能还添加了图像、视频和/或音频文件。
时间线应该从最右边的位置("今天的日期")开始,提供了一个滚动器,允许用户向左滚动以查看更早的事件,向右滚动以查看稍晚的事件,一直滚动到最右边的地方(已经提到的"今天的日期")。
有很多数据需要加载到时间线中(150多年的事件,仅文本就有200页左右)——这让我觉得,如果我把所有数据都转储到一个水平格式的可滚动html页面中,可能会导致一个超重的页面,需要很长时间才能加载,在一些(大多数)浏览器中可能很难滚动,甚至可能导致浏览器崩溃。(不过,我可能搞错了。请看我的问题1。)
因此,我正在考虑当页面滚动到"靠近"页面时(在左侧或右侧)所需的数据加载到页面中,并在页面滚动到离它足够远时再次卸载时的解决方案。
作为一名网络编程"大师",我对这项任务有点困惑,如果能给我一些建议,我将不胜感激。
我的问题:
-
我认为不应该立即将所有数据加载到水平页面中,这是不是错了?也许这样做没关系?
-
处理整个过程的浏览器更友好的方法是什么:a)花几秒钟从数据库中预加载整个时间线的所有数据,然后在需要时将这些数据片段回声到div中?-或者b)只在需要时从数据库加载数据?
-
如何使用PHP/HTML实际完成预加载/打印或加载?
-
也许有人知道一个开源或商业水平时间线,已经做到了我所描述的?
提前谢谢!
-
这取决于你的情况。但我认为这个想法很棒(我只是觉得你的时间线看起来像一个画廊,一张专辑,…)
-
我的答案是
a
和b
。当需要的时候,我会从数据库中加载这些数据(但当页面滚动到"关闭"时,我会加载这些数据)例如:我在2013年,我会花几秒钟的时间加载2011年和2012年(或最后100项) -
我认为我们可以通过
ajax
加载数据。 -
我真的不知道,但我认为你可以从Raad的Answer中介绍的框架中定制/继承一些东西。
-5.你可以创建自己的时间线。也许你会花这么多小时来做这件事。
我们如何创建这个时间线?。您可以使用关键字infinite scroller
进行搜索。
我不确定这是否符合您的所有需求,但看起来可能很接近-试试http://timeline.verite.co/