How to implement lazy loading image in website?

Today now in this post i will show you How to implement lazy loading image in website? Here you can learn how you use lazy load images in your website. So todays market you can see this is very important if your site not take the more time in loading.

jquery.lazyload.js plugin is provide us to forces the page images to pause the loading process until the reader has viewed on that specific area of the page. So lazyload js is a very helpful for the make less load your website page.

Now in this post i will give you a very simple and also basic example of lazy load images in any html page. Sometimes you see that it take a long time to load your web images, on that’s way taking a lot’s off time to load. But this example through you can solve image loading issue.

So, you need to just copy the bellow my html file and you can run. You can also simple implement the lazyload js plugin in your PHP or any PHP framework as like laravel, codeigniter etc.

So, let’s see the bellow example :

Example:
<!DOCTYPE html>
<html>
<head>
	<title>How to implement lazy loading image with example for your website?</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>


	<style type="text/css">
		img{width:100%;height:250px;border:1px solid #e1e1e1;}
		.col-md-4{padding-bottom: 70px;}
		h2{padding-bottom: 20px;}
	</style>


</head>
<body>


<div class="container">


	<h2>How to implement lazy loading image with example for your website?</h2>


	<div class="row">


		<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>


			<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>


				<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>


			<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>


				<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>


				<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>


			<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>


		<div class="col-md-4">
			<img data-original="https://i1.wp.com/codingspoint.com/wp-content/uploads/2022/01/banner-optimized-3.jpg?resize=735%2C290&ssl=1" >
			<a target="_blank" href="https://codingspoint.com/how-to-autocomplete-websites-with-domain-and-logo-by-using-clearbit-api-in-php/">How to autocomplete websites with domain and logo by using clearbit API in PHP</a>
		</div>
	</div>
</div>


<script type="text/javascript">
	$("img").lazyload({
	    effect : "fadeIn"
	});
</script>


</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.