jQuery Lazy Load

  • 15-04-2022
  • 1301
  • Jquery
  • Haresh Chauhan

Hi, Artisan

Here you learn that how to create image lazy load as well as before load image lazy by the different loader and custom this is easy to learn just need to download jQuery Lazyload can and put class and you will create your image lazy load here I have user bootstrap 4 library to show just demo you can use what you want.

When you open web page then image increases your web page load time. Now we use lazy load and put on the image after the load web page we get animation on the image. after fully load the web page then we get an image.

In this post we learn lazy load functionality. Lazy load functionality in a very useful for one kind of animation. We can use the lazy load functionality easily integrate into our project. You can as per your need customize the lazy load. you can use the lazy load functionality anywhere. So, In this tutorial we learn how we can make lazy load functionality in our project.

Example :

index.htm

Here, follow below example and get lazy load into your web page.

Jquery - notification popup box using toastr JS Plugin

<!DOCTYPE html>
<html>
 <head>
   <title>Lazy Image</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <style type="text/css">
    img{
      max-width: 100%;
      height: auto;
   }
   </style>
 </head>
  <body>
  <section>
  <div class="container mt-5">
  <div class="row">
    <div class="col-lg-3">
      <img class="lazy" data-src="https://www.webappfix.com/storage/post-image/2020/01/post-image-1579487306-12ZSq.jpg" src="PUT YOUR LOADER IMAGE URL">
    </div>
    <div class="col-lg-3">
      <img class="lazy" data-src="https://www.webappfix.com/storage/post-image/2019/12/post-image-1575967633-TTLny.jpg"
      src="PUT YOUR LOADER IMAGE URL">
    </div>
    <div class="col-lg-3">
      <img class="lazy" data-src="https://www.webappfix.com/storage/post-image/2019/12/post-image-1575304916-P3vIF.jpg"
      src="PUT YOUR LOADER IMAGE URL">
    </div>
    <div class="col-lg-3">
      <img class="lazy" data-src="https://www.webappfix.com/storage/post-image/2019/11/post-image-1574738139-qenMw.jpg"
      src="PUT YOUR LOADER IMAGE URL">
    </div>
  </div>
  </div>
  </section>
  <!-- jquery cdn -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- bootstrap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <!-- jquery.lazy.min.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
  <!-- code lazy load -->
  <script type="text/javascript">
  $(document).ready(function(){
    $('.lazy').Lazy();
  });
  </script>
  </body>
</html>

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :