将数据加载到水平时间轴中

Question

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

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

有很多数据需要加载到时间轴中（150多年的事件，单独约200页的文本） - 这让我觉得如果我将所有数据转储到水平格式化，可滚动的html页面中，它可能会导致超级重页面需要永远加载，可能很难在某些（大多数？）浏览器中滚动，甚至可能导致浏览器崩溃。 （但我可能会弄错。请参阅我的问题＃1。）

因此，当页面滚动到“关闭”页面（左侧或右侧）时，当所需数据加载到页面时，我正在考虑解决方案，并在页面滚动远离页面时再次卸载。

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

我的问题：

1. 假设所有数据都不应该立即加载到水平页面中，我错了吗？也许可以这样做吗？

2. 处理整个过程的浏览器更友好的方法是什么：a）花几秒钟预加载数据库中整个时间轴的所有数据，然后当需要时，将 div 中的数据分成 div ？ - 或b）只在需要时从数据库加载数据？

3. 如何使用PHP / HTML实际完成预加载/打印或加载？

4. 也许有人知道开源或商业水平时间表已经完成了我所描述的内容？

提前谢谢！

Answer 1

我不确定这是否符合您的所有需求，但看起来可能很接近 - 试试http://timeline.verite.co/

Answer 2

1. 这取决于你的情况。但我认为这个想法很棒（我只是认为你的时间轴看起来像一个画廊，一张专辑......）。

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

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

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

-5。您可以创建自己的时间表。也许你会花这么多时间来做这件事。

我们如何创建此时间表？您可以使用关键字infinite scroller进行搜索。