Skjut upp bildinläsning med ren JavaScript

Den här handledningen visar hur man skjuter upp bildinläsning tills det att hela dokumentet (DOM) har laddats in och tills dess att bilder korsar visningsområdet. Vi kommer att hämta bilder med lat-inläsning genom att använda ren JavaScript och tillhandahålla olika bildstorlekar för olika skärmstorlekar.

Du kanske vill skjuta upp bildinläsning för att förbättra hastigheten och spara bandbredd på mobila enheter. Lat-inläsning av bilder innebär att bilder bara laddas om de är i visningsområdet och att de laddas efter det att hela dokumentet (DOM) har lästs in.

Det här tillägget har testats och fungerar med Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4) och Microsoft Edge (42.17134.1.0), detta utan någon polyfill. Tillägget fungerar i Internet Explorer (11.829.17134.0) med en polyfill för IntersectionObserver. Om du vill stödja äldre webbläsare kan du läsa vårt inlägg om transpilering och komplettering av JavaScript.

JavaScript

Vi har lagt till en händelselyssnare för att skjuta upp bildinläsningen tills det att hela dokumentet (DOM) har laddats och vi använder en observatör för att bara ladda bilder när de korsar visningsområdet.

// Initialize when DOM content has been loaded
document.addEventListener('DOMContentLoaded', start, false);

// Start this instance
function start()
{
    // Lazy load images
    lazyLoadImages();

} // End of the start method

// Lazy load images
function lazyLoadImages()
{
    // Get images
    var images = document.querySelectorAll('img.lazy');

    // Create a new IntersectionObserver (Polyfilled)
    var observer = new IntersectionObserver(function (entries) {

        // Loop entries
        for (i = 0; i < entries.length; i++) {

            if (entries[i].isIntersecting === true) {
                var image = entries[i].target;
                var src = image.getAttribute('data-src');
                var srcset = image.getAttribute('data-srcset');
                if (src !== null) { image.src = src; }
                if (srcset !== null) { image.srcset = srcset; }
                image.classList.remove('lazy');
                observer.unobserve(image);
            }
        }
    });

    // Loop images
    for (i = 0; i < images.length; i++) {
        observer.observe(images[i]);
    }

} // End of the lazyLoadImages method

Exempel med html

Vi kan använda en bildkälla i en img-tagg eller en uppsättning av flera bildstorlekar, webbläsaren väljer den bild som ska användas i en källuppsättning. Vi lägger till lazy som klass till bilder som skall ha uppskjuten inläsning. Äldre webbläsare stöder inte attributet srcset och vi måste därför lägga till attributet data-src som backup. Du behöver också en polyfill för IntersectionObserver om du vill stödja äldre webbläsare.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lazy image loading</title>
    <style>
        .annytab-image{
            max-width: 100%;
        }
        .lazy{
            visibility: hidden;
        }
    </style>
</head>
<body style="width:100%;font-family:Arial, Helvetica, sans-serif;padding:0;margin:0;">

    <!-- One size image fits all screens -->
    <img alt="One image size fits all screens!" class="lazy annytab-image" data-src="/images/fall_nature.jpg" />

    <!-- Multiple image sizes for different screens, data-src is fallback for IE 11 and older browsers -->
    <img alt="Multiple image sizes for different screens!"
         class="lazy annytab-image"
         data-src="/images/adventure-clouds-640x360.jpg"
         data-srcset="/images/adventure-clouds-640x360.jpg 640w,
                     /images/adventure-clouds-1280x720.jpg 1280w,
                     /images/adventure-clouds-1920x1080.jpg 1920w,
                     /images/adventure-clouds-3840x2160.jpg 3840w" />

    <!-- Scripts -->
    <!--<script src="/js/polyfills/intersection.observer.min.js"></script>-->
    <script>

        // Initialize when DOM content has been loaded
        document.addEventListener('DOMContentLoaded', start, false);

        // Start this instance
        function start()
        {
            // Lazy load images
            lazyLoadImages();

        } // End of the start method

        // Lazy load images
        function lazyLoadImages()
        {
            // Get images
            var images = document.querySelectorAll('img.lazy');

            // Create a new IntersectionObserver (Polyfilled)
            var observer = new IntersectionObserver(function (entries) {

                // Loop entries
                for (i = 0; i < entries.length; i++) {

                    if (entries[i].isIntersecting === true) {
                        var image = entries[i].target;
                        var src = image.getAttribute('data-src');
                        var srcset = image.getAttribute('data-srcset');
                        if (src !== null) { image.src = src; }
                        if (srcset !== null) { image.srcset = srcset; }
                        image.classList.remove('lazy');
                        observer.unobserve(image);
                    }
                }
            });

            // Loop images
            for (i = 0; i < images.length; i++) {
                observer.observe(images[i]);
            }

        } // End of the lazyLoadImages method

    </script>

</body>
</html>

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *