Lazy Load Intersection Observer

    Utilisation de IntersectionObserver pour gérer le Lazy Load sur img picture iframe ou autres (à étendre si besoin).
    Permet de charger les contenus dans le cas où le navigateur ne gère pas IntersectionObserver.
    Ne pas oublier une petite balise noscript pour les navigateurs sans Javascript mais aussi pour le SEO.
    Intersection Observer API sur MDN

    Le script

    Afficher / télécharger la source JS

    ;(async ($) => {

        'use strict';

        if(typeof DOM !== 'object') {

            const DOM = {
                document: $(document),
                body: $('body').first()
            };
        }


        let lazyClass = 'lazy-io',
            lazyClassLoaded = lazyClass + '-loaded',
            lazyAttributeData = 'srcset',
            lazyAttribute = 'data-' + lazyAttributeData,
            margins = {
                top: 0,
                right: 0,
                bottom: 400,
                left: 0
            };


        $.lazyIO = async function (fromDomNode) {

            if ("IntersectionObserver" in window) {

                const lazyLoad = async target => {

                    let target_ = $(target),
                        tag = target_.prop('tagName').toLowerCase();


                    // set attribute data-margins='{"bottom": 300, "left": 10, etc}' to specific margins instead of default 0 0 0 0
                    if(target_.attr('data-margins') !== undefined) {

                        let json = $.parseJSON(target_.attr('data-margins'));

                        for(let i in json) {
                            margins[i] = json[i];

                        }
                    }

                    let options = {
                        rootMargin: margins.top + 'px ' + margins.right + 'px ' + margins.bottom + 'px ' + margins.left + 'px',
                        threshold: [0.0]
                    };

                    let lookAtIo = new IntersectionObserver((entries, observer) => {

                            entries.forEach(entry => {

                                if (entry.isIntersecting) {

                                    let element_ = $(entry.target);

                                    // load picture > source + img
                                    if (tag === 'picture') {

                                        element_.find('source').each(function () {
                                            let source_ = $(this);
                                            source_.attr(lazyAttributeData, source_.data(lazyAttributeData)).removeAttr(lazyAttribute);
                                        });

                                        let img_ = element_.find('img').first();

                                        // img must have a placeholder src eg. data:image/gif;base64,R0lGODlhCgAKAIABAAAAAP///yH5BAEAAAEALAAAAAAKAAoAAAIIjI+py+0PYysAOw==

                                        img_.attr('src', img_.data(lazyAttributeData)).removeAttr(lazyAttribute);
                                        element_.addClass(lazyClassLoaded);


                                    }

                                    // load img
                                    if ($.inArray(tag, ['img', 'iframe']) !== -1) {

                                        // img must have a placeholder src eg. data:image/gif;base64,R0lGODlhCgAKAIABAAAAAP///yH5BAEAAAEALAAAAAAKAAoAAAIIjI+py+0PYysAOw==
                                        // iframe must have a fake src eg about:blank

                                        element_.attr('src', element_.data(lazyAttributeData)).addClass(lazyClassLoaded).removeAttr(lazyAttribute);

                                    }

                                    // load xml Http Request
                                    if ($.inArray(tag, ['div', 'span', 'samp']) !== -1) {

                                        // no placeholder needed
                                        $.ajax({
                                            url: element_.data(lazyAttributeData),
                                            async: true,
                                            type: 'get',
                                            success: (response) => {
                                                if(element_.attr('data-type') !== undefined) {
                                                    if (element_.attr('data-type') === 'json') {

                                                        element_.text(JSON.stringify(response, null, '\t'));

                                                    }
                                                    // add other type if needed

                                                }  else {
                                                    element_.html(response);
                                                }

                                                element_.addClass(lazyClassLoaded).removeAttr(lazyAttribute);

                                                // on kortic.com (see JS sources or https://www.kortic.com/tooltip-infobulle-a11y-accessible.html)
                                                target_.find('[data-tooltip]').tooltip();

                                            },
                                            error: () => {
                                                /* do something */
                                            }
                                        });


                                    }

                                    /* … optionally add other types of elements (asynchronous content, etc.) */

                                    observer.disconnect();

                                }
                            });

                    }, options);

                    lookAtIo.observe(target);
                };

                let elements = $('.' + lazyClass, fromDomNode === null ? DOM.body : fromDomNode);

                elements.length && elements.each( function () {
                    !$(this).hasClass(lazyClassLoaded) && lazyLoad(this);
                });

            } else {

                // fallback : charge tout si IntersectionObserver n'est pas pris en charge…
                $('.' + lazyClass, fromDomNode === null ? DOM.body : fromDomNode).each( async function() {

                    let element_ = $(this),
                        tag = element_.prop('tagName').toLowerCase();

                    // load picture > source + img
                    if(tag === 'picture') {
                        let img_ = element_.find('img').first();

                        element_.addClass(lazyClassLoaded).find('source').each( function () {
                            let source_ = $(this);
                            source_.attr(lazyAttributeData, source_.data(lazyAttributeData)).removeAttr(lazyAttribute);
                        });

                        img_.attr('src', img_.data(lazyAttributeData)).removeAttr(lazyAttribute);
                    }

                    // load img
                    if($.inArray(tag , ['img', 'iframe']) !== -1) {

                        element_.attr('src', element_.data(lazyAttributeData)).addClass(lazyClassLoaded).removeAttr(lazyAttribute);

                    }

                    // load xml Http Request
                    if($.inArray(tag , ['div', 'span', 'samp']) !== -1) {

                        $.ajax({
                            url: element_.data(lazyAttributeData),
                            async: true,
                            type: 'get',
                            success: ( response ) => {
                                switch (element_.attr('data-type')) {
                                    case 'json':
                                        element_.text(JSON.stringify(response, null, '\t'));
                                        break;

                                    // add other type if needed

                                    default:
                                        element_.html(response);
                                }


                                element_.addClass(lazyClassLoaded).removeAttr(lazyAttribute);

                                // on kortic.com (see JS sources or https://www.kortic.com/tooltip-infobulle-a11y-accessible.html)
                                target_.find('[data-tooltip]').tooltip();

                            },
                            error:  () => {
                                /* do something */
                            }
                        });
                    }

                    /* … optionally add other types of elements (asynchronous content, etc.) */

                });
            }

        };

        DOM.document.ready( () => {
            $('.' + lazyClass).length && $.lazyIO();
        });

    })(jQuery);

    La CSS

    Afficher / télécharger la source CSS

    /* nécessite un svg animé (https://www.kortic.com/svg/spritesheet.svg#i-loader par exemple) */

    html.no-js .lazy-io {
        display: none;
    }

    .lazy-io:not(.lazy-io-loaded):not(div):not(span) {
        background-image:url('/svg/spritesheet.svg#i-loader');
        background-size: 1.25rem 1.25rem;
        background-position: center center;
    }

    /* seulement pour Kortic :-) */
    html.dark-mode .lazy-io:not(.lazy-io-loaded):not(div):not(span) {
        background-image: url('/svg/spritesheet.svg#i-loader-light');
    }


    picture.lazy-io:not(.lazy-io-loaded) {
        max-width: 100%;
        min-width: 100%;
        min-height: 100%;
    }

    Utilisation

    Utilisation sur iframe Youtube
    <iframe width="560" height="315" class="col xs-12 s-12 lazy-io" 
        src="about:blank" 
        data-srcset="https://www.youtube-nocookie.com/embed/stCxLxBMjYA" 
        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
    Tout est dans le js... Exemple ici

    Utilisation sur une image
    Aliquam iaculis faucibus a bibendum
    <img decoding="async"
        class="lazy-io"
        alt="Aliquam iaculis faucibus a bibendum"
        src="/blank.gif"
        data-srcset="https://pictures.kortic.com/400x400-00b0b0.png"
        />
        <noscript>
            <img decoding="async"
                alt="Mauris posuere vulputate vel aliquam"
                src="https://pictures.kortic.com/400x400-00b0b0.png"
                />        
        </noscript>
    Utilisation sur picture
    Libero duis aliquam
    <picture class="lazy-io" data-margins='{"bottom":100}'>
        <source media="(max-width: 30rem)"  
                srcset="/blank.gif" 
                data-srcset="https://pictures.kortic.com/400x400-00b0b0.png" />
        <source media="(max-width: 63.9375rem)"  
                srcset="/blank.gif" 
                data-srcset="https://pictures.kortic.com/200x200-00b0b0.png" />
        <source media="(min-width: 64rem)"  
                srcset="/blank.gif" 
                data-srcset="https://pictures.kortic.com/250x250-00b0b0.png" />
        <img decoding="async" alt="Libero duis aliquam" 
             src="/blank.gif" 
             data-srcset="https://pictures.kortic.com/250x250-00b0b0.png" />
    </picture>
    <noscript>
        <img decoding="async" alt="Posuere varius egestas arcu" src="https://pictures.kortic.com/400x400-00b0b0.png" />
    </noscript>
    Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
    Voir aussi…
    • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
    • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
    • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass, SVG encoder, base64 SVG pour CSS. SVG to base64, Convert SVG to Data URI for css
    • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG, optimisation SVG web performance
    • SVG Responsive Utilisation des media queries internes au SVG
    • Lazy Load Intersection Observer Lazy Load avec IntersectionObserver API pour images, picture, iframe, etc. Chargement lazy load de contenu, chargement différé de contenu de page web, lazy loading script
    • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
    • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
    • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran. Infobulle accessible, accessible tooltip
    • Zipcode patterns Contrôle automatisé de codes postaux internationaux, script zipcode, zipcode validator
    • Responsive background-image jQuery responsive background-image plugin, plugin jQuery responsive background images
    • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). Drapeaux SVG pour internationalisation de sites multilingues.
    • Layout rigolo Une autre approche pour définir un layout de page responsive.
    • Générateur de noms API de génération de couples prénom/nom aléatoires.
    Soutenez Aquinum
    2020-08-13