ASP.NET，MVC 3，C＃网站，预加载链接的页面

Question

For an ASP.NET, MVC 3, C# website with a home page that has links to other pages -

After the home page has been requested and loaded into the browser, is there a way that the linked pages can be "pre-loaded" so they will rendered immediately without a trip back to the server?

EXAMPLE - Let's say I was selling 10 products. Each product will have their own "product detail" page linked from the home page. When someone goes to the home page, I want to "pre-load" one or more of the "product detail" pages in the background, so when the "product detail" link is clicked, the page will be immediately available.

Answer 1

That's kinda strange what you want here. You can always load these pages via AJAX, then handle clicks on appropriate hyperlinks and replace entire DOM with what you have, but is it worth the effort and maintenance? Maybe PJAX will help here?

Answer 2

If you really want to do some sort of parallel loading, you can have an element that is not actual displayed on the page but that holds valid content. Something like:

<div id="parallel_load" style="position:absolute;left: -1000px;width: 100px;></div>

Then you can create a queue of things you want to go get. Since it's almost exclusively going to be images that you'll want to preload, you can simply have a list that requests one image at a time from a service, creates a new element and inserts it into this div. That would force the browser to load the new image in the background while the user is doing other things ... clicking, logging in.

$(LoadNextImage(0));

function LoadNextImage(index)
{
    // do ajax call here to get the url to the image and id
    // use index to keep track of what images have loaded maybe

    var image = $('<img id="' + id + '"');
    image.attr('src', urlFromAjax);
    image.appendTo('#parallel_load');

    // moreImages would be some response from the server that
    // says you're not done yet possibly
    if (moreImages) 
        setTimeout(LoadNextImage, 500);
}