Load Content in page scroll using PHP
In web development, it is important to create a seamless and engaging user experience. One of the techniques to achieve this is to implement the "Load More" feature that dynamically brings up and displays additional content as the user scrolls down a page. This technology not only enhances the user experience, but also optimizes page loading by reducing the initial data load. In this blog, we'll explore how to implement the "load more" content functionality using PHP.
Understanding the Concept Of Load More
Instead of loading all the content on the webpage at once, we load a small initial batch of content. As the user scrolls down, more content is received from the server and attached to existing content, creating a seamless scrollable experience.
Prerequisites
For this tutorial, you need to have a basic understanding of HTML, CSS, and PHP. Additionally, you'll need a web server (like Apache) with PHP support.
Implementation Steps
1. Set up the HTML Structure
Start by creating the basic HTML structure of your webpage. Here's a simple example:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Load more in page scroll</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center mt-2 bg-primary p-2 text-white"> Load more in page scroll </h2>
<div class="row mt-5" id="content-container">
</div>
</div>
</body>
</html>
2. Create the Styles
Create a Styles.css file and add your own styles. I use Bootstrap to implement the UI of this application.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
3. Implement the PHP Backend
Create a PHP script that generates and returns additional content to be loaded. Let's call this script load-more.php.
<?php$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "load_more";
$conn = mysqli_connect($hostname, $username, $password, $dbname) or die("connection error.");
if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1;
}
$itemsPerPage = 9;
$offset = ($page - 1) * $itemsPerPage;
$result = mysqli_query($conn, "select * from images limit $offset, $itemsPerPage");
if(mysqli_num_rows($result) > 0)
{
while($data = mysqli_fetch_assoc($result))
{
echo '<div class="col-sm-4 p-2"><img src="images/'. $data['image'].'" alt="asfdsf" /></div>';
}
}
?>
4. Implement the JavaScript
Finally, to handle the dynamic loading of content create a JavaScript file script.js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>
var loading = false;
var page = 1;
$(document).ready(function(){
loadMoreContent();
});
function loadMoreContent() {
if (loading) return;
loading = true;
$.ajax({
url: 'load-more.php',
method: 'GET',
data: { page: page },
success: function(response) {
$('#content-container').append(response);
loading = false;
page++;
}
});
}
$(window).on('scroll', function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
loadMoreContent();
}
});
Comments
Post a Comment