How to implement lazy loading image with example for your website?

By Hardik Savani | October 4, 2016 | | 10490 Viewer | Category : Javascript Bootstrap jQuery


Share this post:



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:

<!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 : .






We are Recommending you: