How to implement lazy loading image with example for your website?
In this post we will give you information about How to implement lazy loading image with example for your website?. Hear we will give you detail about How to implement lazy loading image with example for your website?And how to use it also give you demo for it if it is necessary.
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 >
<h2>How to implement lazy loading image with example for your website?</h2>
<div >
<div >
<img data-original="https://onlinecode.org/upload/Laravel-5-barcode-generator.png" >
<a target="_blank" href="/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 >
<img data-original="https://onlinecode.org/upload/laravel-angular.png" >
<a target="_blank" href="/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 >
<img data-original="https://onlinecode.org/upload/Laravel-acl.png" >
<a target="_blank" href="/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 >
<img data-original="https://onlinecode.org/upload/Laravel-5-resize-image-upload.png" >
<a target="_blank" href="/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 >
<img data-original="https://onlinecode.org/upload/laravel-5-chartjs.png" >
<a target="_blank" href="/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 >
<img data-original="https://onlinecode.org/upload/Bootstrap-Typeahead-with-Ajax-Example.png" >
<a target="_blank" href="/dynamic-autocomplete-search-using-bootstrap-typeahead-js-exampleexample.html">Dynamic Autocomplete search using Bootstrap Typeahead JS Example</a>
</div>
<div >
<img data-original="https://onlinecode.org/upload/highchart.png" >
<a target="_blank" href="/how-to-add-charts-in-laravel-5-using-highcharts-example.html">How to add charts in Laravel 5 using Highcharts ?</a>
</div>
<div >
<img data-original="https://onlinecode.org/upload/laravel-ajax-crud.png" >
<a target="_blank" href="/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 >
<img data-original="https://onlinecode.org/upload/Laravel-google-captcha.png" >
<a target="_blank" href="/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 >
<img data-original="https://onlinecode.org/upload/Laravel-mailchimp.png" >
<a target="_blank" href="/laravel-5-mailchimp-api-integration-from-scratch-with-exampleexample.html">Laravel 5 mailchimp api integration from scratch with example</a>
</div>
<div >
<img data-original="https://onlinecode.org/upload/laravel_pagination_custom.png" >
<a target="_blank" href="/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 : .
Hope this code and post will helped you for implement How to implement lazy loading image with example for your website?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs