JQuery - Dynamic content loading, which is the most efficient?

Question

I'm curious about that. I am starting to code a webpage where I basically want to have the same design all over. Where only content changes. So I don’t want to load whole new pages where basically the same things load over and over again. I want to download only the content.

Now I have two possible solutions. Or use some kind of jQuery content slider. Where all the huuge content is, but I choose to show only the parts that I want. And when you click links, the position of the content in the div changes.

Or another solution where I have a separate file with huge amounts of div. And when the click links basically empty the div and load the contents of the selected div from this other file.

Which solution will be the best? To think wise as a whole and in programming? I expect quite a lot of php programming here, and I want to also reduce the load, especially since the initial loading of the site contains serious heavy images.

Answer 1

If there is too much content, preloading it will be very slow for end users. I suggest you move on to the second approach to dynamically request content when you click a link.

You can easily simplify the design by capturing all the links and making an ajax call to retrieve the content and paste it into the appropriate container. Assuming each link retrieves content from a different URL, and that content is pasted into a different container depending on which link was clicked, you just need to assign several attributes to each such AJAX'd link:

Define a data-remote attribute for each link that can download content using AJAX.

Define another data-container attribute that indicates the identifier of the container into which the result should be inserted.

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

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

 $('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 }); 

Answer 2

Keep in mind that using partial queries, you will lose browser navigation, your application will look like a flash in terms of usability, and the w / e trick you use to fix it will still be hacked.

You mention a content slider if you want the slide effect itself to be difficult to transition from a partial request or preloaded content.

If you don’t need to actually “slide” the content, make sure that your pages have all external resources cached in the browser (all CSS, all JavaScript, all images are loaded externally), and your page has only (I hope as minimalistic as possible tags) html content. Thus, with everything in the cache, you will not see any additional bandwidth, and the content itself is very similar to what you would get with an ajax request, for example.

Sometimes technology misuse occurs because we do not use current (and very simple) files correctly, and we try to come up with complex solutions when everything is at hand.