Loading Content In With Ajax

Feb 10, 2016

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.

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.

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.

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.

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.