jQuery Lazy 3

http://jquery.eisbehr.de/lazy/example_basic-usage

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

$(function () {
  $('.lazy').lazy();
});

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

img.lazy {
  width: 700px; 
  height: 467px; 
  display: block;
}
PreviousLayload ajax && background 2NextjQuery lazyload 4

Last updated