HTMLify

lazy_loading
Views: 84 | Author: light
<!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>

Comments