Solved

How to display an extremely long web page

Posted on 2015-02-14
5
102 Views
Last Modified: 2015-02-15
I have a very simply web page that is extremely long.  It has a little under 4 million characters.  It's nothing but very simply html with about 300 images interspersed throughout.

The problem is that it takes forever to load -- maybe 10 minutes or more -- and it overtaxes the browser while loading.

Is there a way -- I'm thinking some flavor of JavaScript -- to resolve this?  I've found a couple of "lazy load" scripts, but they either apply only to the images, or else they require the page content to be dived up into sections that will load as each section appears in the browser's view port.  I'm looking for a solution that won't require much or anything in the way of modifying the html, of which there are nearly 85,000 lines of code.

Thanks!

Regards,
Jon
0
Comment
Question by:Jonathan Greenberg
  • 2
  • 2
5 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
You have a design that is never going to work.  your only solution is to break it up into multiple pages with links to navigate.  you are trying to push more through the internet pipe than it can handle.  If the page is public facing don't ecpect many visitors, because even if some decide to wait; their browser will time out and drop the connection anyway.

Your soultion is never going to come from finding some kind of hack to get around it because no matter what you do, there is a limit to how much can be moved in a given amount of time.  Your only solution will have come in the form of a re-design with realistic page  payloads.

Cd&
0
 

Author Comment

by:Jonathan Greenberg
Comment Utility
Thanks for the response.

Just to clarify, this page is not for the public.  It's a personal page for a single person, who will be happy to wait for a few seconds of load time.  It just needs to do a lot better than it's doing to suit my purposes.

With that in mind, is there any feasible method of making the page more manageable without having to break the html up into hundreds of sections?

Thanks.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
You can try compression by zipping it, but with that many images you are not going to get as much size reduction as you will with the text.  Still it will not come down to anything acceptable.  85,000 lines of code still has to be parsed and serialized in the the document object, and a redererObject has to be instantiated for ever element in the document tree.  So even if you found a way to reduce the transfer time it is still going to take a massive amount of time to actually get layout done.  

What you have is beyond the capability of the technology to cope with as a single piece.

Cd&
0
 
LVL 6

Expert Comment

by:rjohnsonjr
Comment Utility
" else they require the page content to be dived up into sections that will load as each section appears in the browser's view port."

This would be really easy for you to do.  You wouldn't have to divide the page into sections... Store the html page in a database table or perhaps json.. and then when the lazy load is triggered just return the next 10000 characters or something like that....

You can use the mysql substring function to grab the part of the html that you need to return.
http://dev.mysql.com/doc/refman/5.1/en/string-functions.html#function_substring

or if you are using php I am sure you could read in the file into a string and run substr to pull and return the string you wanted.

http://php.net/substr
0
 

Author Comment

by:Jonathan Greenberg
Comment Utility
Thanks to both of you for your help.  I've gone ahead and broken up the content into 12 pages and added navigation, as this seemed like the most time-effective way forward.

rjohnsonjr, your solution might have fit the bill, but I had too many uncertainties about it and decided to go with what seemed to me a bit more easily doable.

Thanks again!

Regards,
Jon
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now