<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lazy_loading</title>
<style>
body{
background-color: #2C2F33;
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 0;
}
main{
max-width: 1200px;
text-align: center;
margin: auto;
padding: 12px;
/*
display: grid;
place-items: center; */
}
/* div{
border-style: groove;
} */
h1{
/* border-style: solid ; */
color:#4A90E2 ;
text-align: center;
}
h2{
color: #F5A623;
}
p{
color: #DADFE1;
}
code{
color: #DADFE1;
}
img {
border-style: solid ;
border-color: #1f2224e7;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 51, 255, 0.267);
width: 100%;
height: 100%;
object-fit: cover;
}
.img{
/* max-resolution: 240dpi; */
margin: 30px 20px 30px 20px ;
/* padding: 40px 20px 40px 20px; */
}
footer{
color: #DADFE1;
}
</style>
</head>
<body>
<header>
<h1>
How does loading="lazy" work?
</h1>
</header>
<main>
<div>
<h2>
Lazy Loading
</h2>
<p>
loading="lazy" is an HTML attribute used for lazy loading images and iframes. It tells the browser to delay loading an image until it's about to enter the viewport, improving page speed and performance.
</p>
</div>
<div>
<h2 >
For example:
</h2>
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/02/pretty-anime-gril-desktop-wallpaper-cover-1024x576.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/02/minimalist-anime-girl-sky-blue-desktop-wallpaper-cover-1024x576.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/02/anime-girl-beautiful-sunset-field-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/01/cool-anime-baddie-girl-smoking-desktop-wallpaper-cover-1024x576.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/01/anime-baddie-girl-red-glow-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/12/1990s-anime-girl-in-black-tshirt-desktop-wallpaper-cover-1024x576.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/01/anime-girl-blurred-light-background-desktop-wallpaper-cover-1024x576.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/01/anime-girl-christmas-deer-antlers-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/02/anime-girl-moon-temple-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/02/anime-girl-beautiful-sunset-field-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/12/samurai-girl-with-katana-winter-desktop-wallpaper-cover-1024x576.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/12/neon-night-anime-girl-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/11/fierce-revy-battle-scene-black-lagoon-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/11/violet-evergarden-writing-letter-christmas-scene-pc-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/11/megumin-konosuba-explosion-spell-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/11/zero-two-peace-sign-red-background-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/10/anime-girl-holding-pumpkin-halloween-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/10/fast-and-furious-anime-girl-racing-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/10/cute-anime-girl-halloween-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/10/cosmic-anime-girl-space-wonder-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/10/fierce-girl-yellow-eyes-red-background-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/09/beautiful-anime-girl-with-blue-eyes-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/09/anime-girl-blue-aesthetic-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/09/anime-girl-aesthetic-background-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/08/anime-neon-glow-girl-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/08/glitter-dream-pastel-anime-girl-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/08/anime-girl-sakura-cherry-blossom-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/08/anime-minimalist-girl-character-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/08/anime-girl-mcdonalds-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/08/blonde-anime-girl-sky-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/07/cool-anime-girl-neon-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/07/anime-girl-fall-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/07/anime-girl-aesthetic-autumn-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/07/girl-pink-field-spring-aesthetic-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/06/anime-girl-with-sword-red-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/06/anime-girl-thoughtful-gaze-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/06/anime-girl-in-field-summer-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/05/summer-anime-girl-pool-aesthetic-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/cute-anime-girl-with-yellow-butterflies-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/beautiful-anime-girl-blue-butterflies-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/anime-girl-blue-mountain-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/anime-girl-with-birds-sunset-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/cute-anime-girl-with-bird-art-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/cute-anime-girl-with-turquoise-hair-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/anime-girl-kissing-skull-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/dark-anime-girl-with-red-eyes-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/cute-anime-girl-in-straw-hat-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/anime-girl-scary-zombies-halloween-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/cute-anime-girl-love-hearts-gif-desktop-wallpaper-cover.gif" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/cute-anime-girl-in-shark-costume-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="https://wallpapers-clan.com/wp-content/uploads/2024/04/anime-girl-astronaut-sci-fi-aesthetic-desktop-wallpaper-cover.jpg" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<!-- <img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy">
<img src="" alt="It's loading but it's faster than before..." class="img" loading="lazy"> -->
</div>
</main>
<footer>
© 2025 Himanshu. All rights reserved.
</footer>
</body>
</html>