Loading Content In With Ajax

When a page initially loads, many requests are made to the browser. Content, Images, and JavaScript Files are just some of the types of requests made to the browser. Of course, the more assets we request from the server, the slower our website will be. For websites that require lots of content and images, it is best to delay the requests for these assets until they need to be displayed. Asynchronous JavaScript and XML gives developers the tools to do just that. Asynchronous JavaScript and XML thankfully has a shorter name it goes by called Ajax. It enables developers with the ability to update parts of a web page asynchronously without having to reload the page. This feature has many use cases that can be implemented on a website that craves speed.

Load on Hover

Online publications like Mashable have a tremendous amount of content that needs to be pulled from their servers and displayed to their users. As part of their navigation, there dropdown menu contains article images and titles for each category. The dropdown is not seen until you hover over any of the links in the navigation, making it unnecessary for them to load the content until the user hovers on a link. This makes it a perfect use case for Ajax. I will recreate a similar scenario with my own page.

See the Pen AJAX HOVER PART 1 by Adrian Eufracio (@adrianeufracio) on CodePen.

Here we have a webpage with an element with a class of .menu. When hovering over .menu, the .menu-submenu element will appear. There isn’t any content inside .menu-submenu but we will load the content in using Ajax.

See the Pen AJAX HOVER PART 2 by Adrian Eufracio (@adrianeufracio) on CodePen.

Using jQuery and the Ajax function, we retrieve the content within content.html and insert it in the .menu-submenu. This creates a faster initial load with virtually the same web experience.

Load On Click

Another common predicament that large blogs have is displaying multiple blog post teasers. Displaying many blog post on a page will increase the load time of a website. Easily fixable with Ajax! Instead of loading all your content on the initial load, lets load it when clicking a button.

See the Pen AJAX CLICK PART 1 by Adrian Eufracio (@adrianeufracio) on CodePen.

We start with a simple webpage with a button at the bottom of it. Now lets add our JavaScript that will load content in when the button with an ID of #load-more is clicked.

<span class="pink">$</span>("<span class="orange">#load-more</span>").click(<span class="blue">function</span>(){
	<span class="pink">$</span>.ajax({
		url: "<span class="orange">content.html</span>",
		cache: <span class="green">false</span>
	})
  	.done(<span class="blue">function</span>( html ) {
    	$( "<span class="orange">.content</span>" ).append( html );
    	$("<span class="orange">#load-more</span>").css("<span class="orange">display</span>","<span class="orange">none</span>");
  	});
});

This was just as easy as the hover example but lets make it easier for the users so they don’t have to click on anything to load the rest of the content. All they have to do is reach the bottom of the page.

See the Pen AJAX SCROLL by Adrian Eufracio (@adrianeufracio) on CodePen.

Using the scroll function, we check whenever the user scrolls if they have reached a point where they have scrolled the height of the web page. Once they have reach the bottom, we load the content into the page.

Conclusion

As you can see these are basic examples, but when dealing with large websites these simple Ajax requests can help create a faster web experience. Faster is better. It is important to note that Ajax is dependent on JavaScript so make sure to create a fallback to alternatively load content when there is no JavaScript available.

Ajax Resources