0

I have been making a Web UI to look into very large (up to 10,000-150,000 lines) txt files. I have been using Ruby on Rails to do this and the interface I have has come along well enough. I am currently running into a problem related to the large size of these files. Currently, when a user selects a file to display, it reads the entire contents of that file (line by line) into a scrollable element.

With the large files, this causes the website to hang a little until it finishes and hang even longer if the user wants to choose a new file (this confuses me a bit more, maybe I need to flush the element of its contents first or something?).

Do you see a way to speed up user experience? My only thoughts are loading only part of the file at a time. The most convenient way I see this implemented is just to read more of the file to the div when the user scrolls close to the bottom of the file. I am not really sure this is a good solution because of how the website hangs when switching files.

An ideal solution might be to load only the visible part of the file to the div at a time, but I am unsure how I would accomplish this.

Any suggestions?

Santiago Elvira Ramirez
  • 1,191
  • 8
  • 28
Brotherhood
  • 91
  • 1
  • 4
  • Have you tried loading whole file into container with "display: none;" and then selecting chunks to display to user? – Arkadiusz 'flies' Rzadkowolski Jul 16 '12 at 20:21
  • You could cache contents of file on server side, then retrieve portion of file you nedd trough ajax call, with detail of buffering 3x times visible are of div, e.g. if your div can display 150 lines, you would buffer 450 or even 1500, to lower number of ajax calls. I think all modern browsers would not have a problem with 1500 lines of text. You can check [here](http://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/11252120#11252120) to see how to get percentage of vertical scrollbar – toske Jul 16 '12 at 20:27
  • You can't do that only with HTML, you need some coding on webserverside too to reach optimum variant. You will need at least JS to do that. If you'd like to split files and do it using JS/jQuery try this http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div – loler Jul 16 '12 at 20:31

1 Answers1

0

You may consider only loading first X number of lines into the view by default. Then giving the user the option to see full file, at which point you could fire off a javascript request to populate the full contents into the container via AJAX.

Mike Brant
  • 70,514
  • 10
  • 99
  • 103