Infinite scroll / lazy loading using html, php, MySQL & javascript

This tutorial will tell you how you can easily make Infinite scroll / lazy loading using html, php, MySQL and javascript. Watch the complete video on youtube with explanation in hindi.

Infinite scroll or lazy loading is a technique used in web development to load content dynamically as the user scrolls down a page. Rather than loading all the content at once, this method only loads a small amount of content initially, and then as the user scrolls down, additional content is loaded in small increments. This technique can be used with HTML, PHP, MySQL, and JavaScript to create a seamless user experience while improving the page loading speed.

The first step in implementing infinite scroll is to set up the database. This involves creating a database table that contains the data to be displayed on the page. The data should be organized in a way that it can be easily retrieved using a SQL query.

Once the database is set up, we can begin creating the PHP script that will retrieve the data from the database. The PHP script should accept parameters such as the number of records to be displayed per page and the current page number. The script should then use these parameters to calculate the starting record for the current page and retrieve the required records from the database.

Next, we need to create the JavaScript code that will handle the infinite scroll functionality. This involves detecting when the user has scrolled to the bottom of the page and making an AJAX call to the PHP script to retrieve the next set of records. The retrieved data is then appended to the existing content on the page.

Finally, we need to create the HTML structure for the page. This involves creating a container element that will hold the content to be displayed on the page. Initially, only a small portion of the content will be displayed, with the rest of the content being loaded as the user scrolls down the page.

In conclusion, infinite scroll or lazy loading is a powerful technique that can greatly improve the user experience and page loading speed of a web application. By using HTML, PHP, MySQL, and JavaScript together, developers can create seamless and responsive web applications that are both user-friendly and efficient.

index.php

<?php

   session_start();
   $_SESSION['last_id']=0;
   ?>
<!DOCTYPE html>
<html>
   <head>
      <title>Infinite Scroll</title>
      <style type="text/css">
         *{
         margin:0;
         padding: 0;
         box-sizing: border-box;
         font-family: 'poppins';
         }.data{
         max-width: 60%;
         margin:auto;
         text-transform: uppercase;
         text-align: center;
         border:2px solid #5e35b1;
         padding:10px;
         border-radius: 5px;margin-bottom: 10px;
         color:#5e35b1;
         background: #5e35b114;
         }
         button{
         text-transform: uppercase;
         text-align: center;
         border:2px solid #5e35b1;
         padding:10px 20px;
         border-radius: 5px;margin-bottom: 10px;
         color:#fff;
         cursor: pointer;
         background: #5e35b1;
         }.my_btn{
         margin-top:10px;
         display: flex;justify-content: center;
         }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
         $(".load_more").click(function() {
            $.post("get-data.php",{},function(ret) {
                var data=JSON.parse(ret);
                for(var i=0;i<data.length;i++){
                    var q=data[i]["id"];
                    var w=data[i]["group_name"];
                    var p="<p class='data'>id: "+q+" - Name: "+w+"</p>";
                    $(".my_data").append(p);
                }
            });
         });
         });
      </script>
   </head>
   <body>
      <br>
      <?php
         $conn = new mysqli("localhost", "root", "", "admin_db");
         // Check connection
         if ($conn->connect_error) {
           die("Connection failed: " . $conn->connect_error);
         }
         $sql = "SELECT * from group_name where id>".$_SESSION['last_id']." limit 10";
         $result = $conn->query($sql);
         if ($result->num_rows > 0) {
           // output data of each row
           while($row = $result->fetch_assoc()) {
             echo "<p class='data'>id: " . $row["id"]. " - Name: " . $row["group_name"]."</p>";
             $_SESSION['last_id']=$row['id'];
           }
         }
         $conn->close();
         ?>
      <div class="my_data"></div>
      <div class="my_btn">
         <button class="load_more">Load More</button>
      </div>
   </body>
</html>

get-data.php

<?php

session_start();
?>
<?php
$conn = new mysqli("localhost", "root", "", "admin_db");
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * from group_name where id>".$_SESSION['last_id']." limit 10";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
   $data[]=$row;
    $_SESSION['last_id']=$row['id'];
  }
}
$conn->close();
echo json_encode($data);
?>