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;
}
Last updated