jQuery - Dynamically loading content, what's most efficient?

Question

Hi, I'm wondering about this one thing. I'm starting to code a webpage where I basically want the same design all over. Where only the content is changing. So I don't want to load entire new pages where basically the same stuff gets loaded over and over again. I want to load only the contents.

Now, I'm presented with two possible solutions. Either using some sort of a jQuery content slider. Where the entire content is huuge, but I choose to show only the parts I want. And when clicking links, the position of the content within the div changes.

Or the other solution where I've got a separate file with huge amounts of div's. And where clicking links basically empties the div and loads the content of a chosen div from that other file.

What solution would be the best? Thinking both in general and programming wise? I'm expecting quite alot of php programming here and I want to reduce the amount of load as well, especially since the initial website load contains some serious heavy images.

Answer 1

Keep in mind that using partial requests you will lose browser navigation, your app will look just like flash in terms of usability, and w/e gimmick you use to fix that will be still a hack.

You mention content slider, if you want the slide effect itself it will be complex to move away from the partial request or preloaded content.

If you don't need to actually 'slide' the content, make your pages have all external resources cached in the browser (all css, all javascript, all images are loaded externally) and your page itself only has the (hopefully as minimalist as possible in terms of tags) html content. That way with everything in the cache you won't see any extra bandwidth being used but the content itself, very similar to what you would get with an ajax request for example.

Sometimes the misuse of technologies are for the sole reason that we are not using the current (and very simple) ones properly, and we try to come up with complicated solutions when everything is at hand.

Answer 2

If there is too much content, pre-loading it all will be a really slow for the end users. I'd suggest you go with the second approach of dynamically requesting content when a link is clicked.

You can easily simplify the design by hijacking all links and making an ajax call to fetch the content and inject it into the relevant container. Assuming each link fetches content from a different URL, and that content gets inserted into a different container depending on which link was clicked, you'd just have to assign each such AJAX'd link a few attributes:

Define an attribute data-remote on each link that could load content with AJAX.

Define another attribute data-container that specifies the container's id where the result is to be inserted in.

// this is the ajaxy link
<a id="test" data-remote="true" data-container="container-id" href="..">Load</a>

Finally, apply a click handler to all links that have the data-remote attribute set:

$('a[data-remote]').click(function() {
    var containerId = this.attr('data-container');
    var url = this.attr('href');
    $('#' + containerId).load(url);

    return false; // stop from navigating to the clicked link
});