将数据加载到水平时间轴

Question

我想要创建一个全屏幕时间轴Web应用程序，该应用程序可以水平滚动左侧和右侧，并显示可能添加了图像，视频和/或音频文件的一些html-and-css格式的文本。

时间线应该从最右边的位置开始（“今天的日期”），提供一个滚动条，允许用户向左滚动以查看先前的事件，并向右滚动以查看稍后的事件，一路回到最右边的位置（已经提到的“今天的日期”）。

有很多数据要加载到时间轴（150多年的事件，大约200页的文本），这让我认为如果我把它全部转储到水平格式化的可滚动html页面，它可能会导致一个超长的页面需要永久加载，可能很难在一些（大多数？）浏览器中滚动，甚至可能导致浏览器崩溃。 （请看我的问题＃1）

所以我正在考虑解决方案，当页面滚动到“关闭”页面所需的数据加载到页面中时（左侧或在右侧），并且当页面滚动得足够远时再次卸载。

不是一个网络编程“大师”，我对这个任务有点困惑，并且会很感激一些建议。

我的问题：

1. 我错在假定所有的数据不应该被加载到水平页，对吗？也许这样做可以吗？

2. 会是什么浏览器更友好的方式来处理整个过程：1）花几秒钟预装所有数据从数据库中整个时间轴，然后呼应的数据块当他们需要时，变成div？ - 或者b）只在需要时从数据库加载数据片段？

3. 如何用PHP/HTML实现预加载/打印或加载？

4. 也许有人知道一个开源或商业的水平时间线，已经做了我所描述的？

预先感谢您！

Answer 1

1. 它是由你的情况。但我认为这个想法很棒（我只是觉得你的时间线看起来像一个画廊，一张专辑......）。

2. 我的答案是a和b。我会在需要的时候从数据库加载数据（但是当页面滚动到“关闭”时，我会加载这些数据） 例如：我在2013年，我将花费几秒钟来加载2011 ，和2012年（或最近的100个项目）

3. 我认为我们可以通过ajax加载数据。

4. 我真的不知道，但我认为你可以自定义/从Raad的答案中引入的框架继承一些东西。

-5。您可以创建自己的时间线。也许你会花这么多小时来做到这一点。

我们如何创建这个时间表？您可以用关键字搜索：infinite scroller。

Answer 2

我不知道这是否符合您的所有需求，但它看起来像它可能接近 - 尽量http://timeline.verite.co/