Load content only when scrolled (Web Optimization) - AJAX, Javascript, PHP & MySQL
Load content only when scrolled (Web Optimization) - AJAX, Javascript, PHP & MySQL
In this tutorial, we are going to teach you how you can load the content of div only when the user scrolled to that section. For example, you have a lot of dynamic sections in your website, loading them all using PHP is very costly since the server has to get a lot of data from the database and it will make your website load slower. The second option was to load all data using AJAX, this will solve the first problem because the website will be loaded instantly and all the sections where dynamic data needs to be displayed will send an AJAX request to get that data and display it in the relevant section using Javascript.
However, take this example, if your website has 10 sections and users mostly use the first 3 sections. This means that the server is serving 7 extra requests which are not commonly being used by clients. It will slow down the server, possibly crash your website if you have a lot of users. What if we find a way of optimization such that the relevant section will only be loaded when required by the user. Simply means, a request of the section will be sent to the server only when asked by a client to get that data. If the user is on the first 3 sections, then the ajax will be called only 3 times and the server will be serving only 3 requests. Request for section 4 will only be served if the user moved or scrolled to that section, otherwise, it will not be loaded. It will greatly optimize your website and make it load faster and more responsive.
This tutorial is written in pure Javascript, no jQuery or any other external library has been used. So you can use this tutorial under all Javascript and PHP frameworks.
Source code:
https://adnan-tech.com/load-content-o...