1

I know proper lazy loading usually requires using objects and a proxy pattern. I'm not there yet as a site needs some redesign. However, is there any way I can still spool out DB data to a page and speed up loading time a bit?

James P.
  • 19,313
  • 27
  • 97
  • 155

2 Answers2

2

You can use JavaScript to start loading extra data as soon as the main page loads. This way your main page can just outline the components on the page, present "spinners" indicating that more data is being loaded and then offload it to JavaScript to get more data.

Zepplock
  • 28,655
  • 4
  • 35
  • 50
  • I don't see how using JS and presenting "spinner" can offload the load on db and do lazy loading that James asked about. – N.B. May 12 '11 at 19:07
  • Well, I initially thought of using js as suggested to at least give the impression that pages load faster (an uninformed user would hardly notice). If anyone has links on using ajax/jQuery to achieve this then please share. Now, if it is actually possible to stagger fetching (may also be possible with ajax) then I'd also be interested. – James P. May 12 '11 at 19:13
  • All you'll ever be able to do is _give the impression_ the page is loading faster. – Lawyerson May 12 '11 at 19:15
  • @Parusa: True. If a user switches between pages often it won't really help. I was thinking of something along the lines of delaying the bits of a page that take longer to display so the rest can load quickly. – James P. May 12 '11 at 19:23
  • @James P.: You can by doing what Zepplock suggested, but he didn't really go into much detail. – Lawyerson May 12 '11 at 19:30
  • Ok. I'm guessing it's something along the lines of loading a page and getting the rest through request pages+ajax. Perhaps I could look into a technique that involves repeated calls to a PHP page to get it to update progressively. – James P. May 12 '11 at 19:44
2

This can be achieved with AJAX.

When you first load a page, put place-holders where the heavy content is supposed to go. For example, use a div with a distinctive style and an animated loading image inside so visitors can clearly tell there is some more loading going on. You can generate familiar looking AJAX loading images at ajaxload.info.

Have some script at the bottom of your page that calls or binds the necessary functions to load the additional content using AJAX. You could bind the AJAX call to jQuery's .ready() for example to have the loading start as soon as the rest of the document is ready or .scroll() to start when the user scrolls over a certain element (e.g. past certain 'landmarks' on your page that separate blocks of content).

When you receive the AJAX response that contains the additional content (preferably pre-formatted as HTML in string form) replace the contents of the placeholder div with the AJAX response using .innerHTML = or jQuery's .html(). Change the style of the div if necessary using setAttribute("class","newClass") or jQuery's .attr("class","value") to replace it's CSS class.

The visitor will be able to see your full page and scroll through it while the loading is taking place. The additional content will appear when it's ready without interrupting the visitor's browsing experience. You can make this a little nicer for the eye by animating the transitions after the content injection.

If you need some additional examples of how to use AJAX to fetch content asynchronously have a look at these for the classical JavaScript approach or jQuery .ajax() docs.

Lawyerson
  • 919
  • 1
  • 7
  • 25