Progressive Loading, ASP.NET MVC

Question

I have a page that has to render a huge set of query results - most of them with very, very small images. It is already paginated, so that won't solve my problem.

The query executes fine - it's very zippy, returns in about .0004 seconds, paginates itself out to the View - all is well in the land of Oz.

However there is some big trouble in that ASP.NET MVC dumps the page when it is ready, not as it is loaded. Is there any way around this?

I tried using jQuery to lace through div layers and draw partial views - this alleviated some of the problem, but it still just 'hangs' on the page until the whole thing is ready to be drawn.

I was looking around and found a few suggestions about using Response.Write - but I couldn't uncover anything relevant to my case. Any ideas? The structure is as follows...

PartialView
- Category
  - IEnumerable<Models.Images> (List)

PartialView
- Page
  - IEnumerable<Models.Images> (List) (Paginated View)

View
- Gallery
-- Index
--- Categories (Ajax Loaded on Demand, not on View render.)
---- ViewPage (No specific model passed)

The problem is clearly the images, I've tested it several times. If I remove the tags from the code, it renders quickly with just any data I tell it to. Each image is around 4 kb in size - so compressing them isn't likely.

Any help would be greatly appreciated.

Answer 1

About how many images are being loaded in a given request? As I'm sure you're aware the issue is less the size of the files and more the quantity of them- it takes longer to move a bunch of small files than an equally sized large file.

One thing to consider would be to send the page down with a specific sized set of results already populated and then use JavaScript (and perhaps scroll events) to dynamically load the rest. Ideally you should try to minimize the size of the initial request so that the page doesn't block user interaction for long; after that initial loading period you could then start pulling in the rest of the results.

Answer 2

There are a couple of things that you can do.

First, make sure the results themselves are not inside tables. IE (and perhaps other browsers) have to wait until the table has been fully loaded before rendering to the browser.

Secondly, there is a command called Response.Flush which will push the buffered output to the client. You can call this repeatedly. You may want to call it for every 10 items or so, for example. If you can incorporate this into your code it should do the trick for you.