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

Question

I want to create a full-screen timeline web application that would scroll left and right horizontally, revealing some html-and-css-formatted text possibly with added images, videos and / or audio files.

The timeline should start at its rightmost position ("today's date"), offering a scroller that would allow user to scroll left to see earlier events, and to scroll back towards the right to see somewhat later events, all the way back to its rightmost position (the already mentioned "today's date").

There's a lot of data to load into the timeline (150+ years worth of events, about 200 pages of text alone) – which makes me think that if I dump all of it into a horizontally formatted, scrollable html page, it may result in a super-heavy page that would take forever to load, may be hard to scroll in some (most?) browsers, and may even crash the browsers. (I may be mistaken, though. Please see my Question # 1.)

So I'm considering the solution when the needed data loads into the page when the page is scrolled "close" to it (on the left or on the right), and unloads again when the page scrolls far enough away from it.

Not being a web programming "guru", I'm a little baffled by the task, and would appreciate a bit of advice.

My questions:

1. Am I wrong in supposing that all the data should not be loaded into the horizontal page right away? Maybe it's okay to do so?

2. What would be the more browser-friendly way to handle the overall process: a) spend a few seconds preloading all the data for the entire timeline from the database, and then echo the pieces of that data into a div when they are needed? - or b) only load the pieces of data from the database when they are needed?

3. How can that pre-loading/printing or loading be actually accomplished with PHP/HTML?

4. Maybe someone knows an open source or commercial horizontal timeline that already does what I'm describing?

Thank you in advance!

Answer 1

1. It is up to your case. But I think that idea is great (I just think your timeline look like a gallery, an album,..).

2. My answer is both a and b . I will load the pieces of data from the database when they are needed(but I will load these data when the page is scrolled "close" to it ) Ex: I'm in 2013 , I will spend a few seconds to load 2011, and 2012 (or last 100 items)

3. I think that We can load data through ajax.

4. I really don't know, but I think that you can custom/inherit something from the framework, which was introduced in Raad's Answer.

-5. You can create your own timeline. Maybe You will spend so many hours to do this.

How can we create this timeline?. You can search with keyword : infinite scroller.