jQuery lazyload 4
https://www.itsolutionstuff.com/post/how-to-implement-lazy-loading-image-with-example-for-your-websiteexample.html#google_vignette
C:\xampp82\htdocs\lazy\lazy1.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="lazy1.css">
</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://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp">
<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="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp">
<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="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg">
<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="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.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="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp">
<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="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg">
<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="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.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="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg">
<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="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg">
<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="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg">
<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="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg">
<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 src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script src="lazy1.js"></script>
</body>
</html>C:\xampp82\htdocs\lazy\lazy1.js
$("img").lazyload({
effect : "fadeIn"
});C:\xampp82\htdocs\lazy\lazy1.scss
img {
width: 100%;
height: 250px;
border: 1px solid #e1e1e1;
}
.col-md-4 {
padding-bottom: 70px;
}
h2 {
padding-bottom: 20px;
}
Last updated