How to Add Lazy Loading Image using JQuery?

By Hardik Savani November 5, 2023 Category : Javascript Bootstrap jQuery

Hello,

Are you looking for an example of how to use lazy load image jquery. you can understand a concept of lazy loading images jquery example. In this article, we will implement a lazyload js example. I would like to show you jquery.lazyload.js demo source code.

Today, we learn how to use lazy load images in our website. In todays market you can see it's very important if your site not take more time in loading.

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

In this post i give you very simple and basic example of lazy load images in my html page. Sometimes you see take a long time to load our web images, that's way taking lot's off time to load, But This example through you can prevent image loading issue.

So, you have to just copy bellow my html file and run. You can also check my demo. You can simple implement lazyload js plugin in your PHP, PHP framework like laravel, codeigniter etc.

So, let's see bellow example:

Preview:

Example:

Read Also: Add Edit Delete Table Row Example using JQuery
<!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="http://itsolutionstuff.com/upload/Laravel-5-barcode-generator.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-5-authenticate-user-in-nodejs-with-socket-io-using-jwtexample.html">Laravel 5 - Authenticate user in NodeJS with socket io using JWT.</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/laravel-angular.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-52-and-angularjs-crud-with-search-and-pagination-exampleexample.html">Laravel 5.2 and AngularJS CRUD with Search and Pagination Example.</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/Laravel-acl.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-52-user-acl-roles-and-permissions-with-middleware-using-entrust-from-scratch-tutorialexample.html">Laravel 5.2 - User ACL Roles and Permissions with Middleware using entrust from Scratch Tutorial</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/Laravel-5-resize-image-upload.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-5-image-upload-and-resize-example-using-intervention-image-packageexample.html">Laravel 5 - Image Upload and Resize Example using Intervention Image Package</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/laravel-5-chartjs.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/how-to-add-charts-in-laravel-5-using-chart-js-example.html">How to add charts in Laravel 5 using Chart JS ?</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/Bootstrap-Typeahead-with-Ajax-Example.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/dynamic-autocomplete-search-using-bootstrap-typeahead-js-exampleexample.html">Dynamic Autocomplete search using Bootstrap Typeahead JS Example</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/highchart.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/how-to-add-charts-in-laravel-5-using-highcharts-example.html">How to add charts in Laravel 5 using Highcharts ?</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/laravel-ajax-crud.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-5-ajax-crud-with-pagination-example-and-demo-from-scratchexample.html">Laravel 5 Ajax CRUD with Pagination example and demo from scratch</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/Laravel-google-captcha.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-5-google-recaptcha-code-and-validation-example-using-anhskohbo-no-captcha-packageexample.html">Laravel 5 - Google reCaptcha code and Validation example using anhskohbo/no-captcha package</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/Laravel-mailchimp.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-5-mailchimp-api-integration-from-scratch-with-exampleexample.html">Laravel 5 mailchimp api integration from scratch with example</a>
		</div>

		<div class="col-md-4">
			<img data-original="http://itsolutionstuff.com/upload/laravel_pagination_custom.png" >
			<a target="_blank" href="http://itsolutionstuff.com/post/laravel-5-custom-pagination-view-exampleexample.html">Laravel 5 custom pagination view example</a>
		</div>

	</div>
</div>

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

</body>
</html>

You can get more information from here : .
Tags :
Previous

PHP Autocomplete Websites with Domain using Clearbit API
Next

Laravel $loop Variable New Feature Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares