😆Lazy loading images using event handlers 1

Example 1. Lazy loading images using event handlers

C:\xampp82\htdocs\lazy\lazy1.html

<!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>
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="jquery.lazy.min.js"></script>
  <script src="lazy1.js"></script>
</body>
</html>

C:\xampp82\htdocs\lazy\lazy1.js

document.addEventListener("DOMContentLoaded", function () {
  var lazyloadImages = document.querySelectorAll("img.lazy");
  var lazyloadThrottleTimeout;
  function lazyload() {
    if (lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }
    lazyloadThrottleTimeout = setTimeout(function () {
      var scrollTop = window.pageYOffset;
      lazyloadImages.forEach(function (img) {
        if (img.offsetTop < (window.innerHeight + scrollTop)) {
          img.src = img.dataset.src;
          img.classList.remove('lazy');
        }
      });
      if (lazyloadImages.length == 0) {
        document.removeEventListener("scroll", lazyload);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
      }
    }, 20);
  }
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

C:\xampp82\htdocs\lazy\lazy1.scss

img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

Example 2: Background-Image lazy loadiing

C:\xampp82\htdocs\lazy\lazy1.html

<!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>
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2023/09/banner-web-image-skincare-solar-gel-pc-2048x819.webp" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <div id="bg-image" class="lazy"></div>
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://dakhoabacviet.net/wp-content/uploads/2024/01/pk-pc-s.jpg" />
  <img class="lazy" data-src="https://imageskincare.vn/wp-content/uploads/2024/01/workshop-t1-2048x819.jpg" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/banner_web_img_pc2.webp" />
  <img class="lazy" data-src="https://beta.imageskincare.vn/wp-content/uploads/2023/09/2023_09_06_imageskincare_cover_resize-Banner-PC.png" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="jquery.lazy.min.js"></script>
  <script src="lazy1.js"></script>
</body>
</html>

C:\xampp82\htdocs\lazy\lazy1.js

document.addEventListener("DOMContentLoaded", function () {
  var lazyloadImages;
  // For Lazyload Background
  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function (entries, observer) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });
    lazyloadImages.forEach(function (image) {
      imageObserver.observe(image);
    });
  }
  // For Lazyload Images
  var lazyloadThrottleTimeout;
  lazyloadImages = document.querySelectorAll(".lazy");
  function lazyload() {
    if (lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }
    lazyloadThrottleTimeout = setTimeout(function () {
      var scrollTop = window.pageYOffset;
      lazyloadImages.forEach(function (img) {
        if (img.offsetTop < (window.innerHeight + scrollTop)) {
          img.src = img.dataset.src;
          img.classList.remove('lazy');
        }
      });
      if (lazyloadImages.length == 0) {
        document.removeEventListener("scroll", lazyload);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
      }
    }, 20);
  }
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
})

C:\xampp82\htdocs\lazy\lazy1.scss

* {
  font-family: sans-serif;
}
#container {
  font-size: 20px;
  line-height: 30px;
  max-width: 600px;
}
#bg-image.lazy {
  background-image: none;
  background-color: #f1f1fa;
}
#bg-image {
  background-image: url("https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-600,h-400");
  max-width: 600px;
  height: 400px;
}
PreviousHow to convert unordered list into nicely styled <select> dropdown using jquery? (ok)NextLayload ajax && background 2

Last updated