Test Image Loading: Always lazy loading!

Ready

HTML
View
Context
Info
Notes


        
        <style>
    .page>.teaser--bannermodule {
        color: #d6d9dc;
    }
</style>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Default: Always image LAZY LOADING (the new default)

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--default</p>
    </div>

</div>

<img src="../../images/4x3/mann-mit-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy" width="508" height="382">

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Überzeugt von der Barmer

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>I'm happy to tell you that the brand is at its best today when it operates under memorable and bold identities.<br /> But that doesn't mean it's rushing into the twenty-first century.</p>
        <ul class="checklist rte--list">
            <li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet.</li>
            <li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis.</a></li>
            <li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, mel ne simul zril temporibus.</li>
        </ul>
    </div>

    <div class="teaser__button-wrapper">
        <a class="a-btn btn--primary" href="" title="">
            Zum Antragsformular
        </a>

    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/mutter-kind-schoss-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/mutter-kind-schoss-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/mutter-kind-schoss-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Überzeugt von der Barmer

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>I'm happy to tell you that the brand is at its best today when it operates under memorable and bold identities.<br /> But that doesn't mean it's rushing into the twenty-first century.</p>
        <ul class="checklist rte--list">
            <li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet.</li>
            <li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis.</a></li>
            <li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, mel ne simul zril temporibus.</li>
        </ul>
    </div>

    <div class="teaser__button-wrapper">
        <a class="a-btn btn--primary" href="" title="">
            Zum Antragsformular
        </a>

    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Überzeugt von der Barmer

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>I'm happy to tell you that the brand is at its best today when it operates under memorable and bold identities.<br /> But that doesn't mean it's rushing into the twenty-first century.</p>
        <ul class="checklist rte--list">
            <li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet.</li>
            <li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis.</a></li>
            <li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, mel ne simul zril temporibus.</li>
        </ul>
    </div>

    <div class="teaser__button-wrapper">
        <a class="a-btn btn--primary" href="" title="">
            Zum Antragsformular
        </a>

    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Überzeugt von der Barmer

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>I'm happy to tell you that the brand is at its best today when it operates under memorable and bold identities.<br /> But that doesn't mean it's rushing into the twenty-first century.</p>
        <ul class="checklist rte--list">
            <li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet.</li>
            <li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis.</a></li>
            <li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, mel ne simul zril temporibus.</li>
        </ul>
    </div>

    <div class="teaser__button-wrapper">
        <a class="a-btn btn--primary" href="" title="">
            Zum Antragsformular
        </a>

    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/frau-arm-pflaster-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/frau-arm-pflaster-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Überzeugt von der Barmer

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>I'm happy to tell you that the brand is at its best today when it operates under memorable and bold identities.<br /> But that doesn't mean it's rushing into the twenty-first century.</p>
        <ul class="checklist rte--list">
            <li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet.</li>
            <li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis.</a></li>
            <li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, mel ne simul zril temporibus.</li>
        </ul>
    </div>

    <div class="teaser__button-wrapper">
        <a class="a-btn btn--primary" href="" title="">
            Zum Antragsformular
        </a>

    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Überzeugt von der Barmer

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>I'm happy to tell you that the brand is at its best today when it operates under memorable and bold identities.<br /> But that doesn't mean it's rushing into the twenty-first century.</p>
        <ul class="checklist rte--list">
            <li><i aria-hidden="true" role="presentation"></i>Lorem ipsum dolor sit amet.</li>
            <li><i aria-hidden="true" role="presentation"></i><a href="#" class="bm-richtext-link">Lorem ipsum dolor sit amet, no sea semper minimum, has te nominavi facilisis.</a></li>
            <li><i aria-hidden="true" role="presentation"></i>Modus graecis et nec, mel ne simul zril temporibus.</li>
        </ul>
    </div>

    <div class="teaser__button-wrapper">
        <a class="a-btn btn--primary" href="" title="">
            Zum Antragsformular
        </a>

    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Docking-Container/Siegelliste

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-docking</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/frau-tablet-arzt-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/frau-tablet-arzt-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, normale Ausprägung

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/grafik-rubrik-frage-1080x405.png" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/grafik-rubrik-frage-1080x405.png" width="1080" height="405">
            <img src="../../images/8x3/grafik-rubrik-frage-1080x405.png" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, 2 Absätze

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/grafik-rubrik-frage-1080x405.png" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/grafik-rubrik-frage-1080x405.png" width="1080" height="405">
            <img src="../../images/8x3/grafik-rubrik-frage-1080x405.png" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, ohne Zitatquelle

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/grafik-rubrik-frage-1080x405.png" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/grafik-rubrik-frage-1080x405.png" width="1080" height="405">
            <img src="../../images/8x3/grafik-rubrik-frage-1080x405.png" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, normale Ausprägung

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" width="822" height="308">
            <source media="(min-width: 641px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" width="822" height="308">
            <img src="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="822" height="308">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, 2 Absätze

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" width="822" height="308">
            <source media="(min-width: 641px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" width="822" height="308">
            <img src="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="822" height="308">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, ohne Zitatquelle

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" width="822" height="308">
            <source media="(min-width: 641px)" srcset="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" width="822" height="308">
            <img src="../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="822" height="308">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, normale Ausprägung

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, 2 Absätze

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<div class="o-teaser teaser--bannermodule">

    <h4 class="teaser__headline">
        Stage Teaser - mit Zitat, ohne Zitatquelle

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>@stage-teaser--with-testimonial</p>
    </div>

</div>

<div class="o-teaser ">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg" width="1080" height="405">
            <source media="(min-width: 641px)" srcset="../../images/8x3/eltern-sohn-toben-1080x405.jpg" width="1080" height="405">
            <img src="../../images/8x3/eltern-sohn-toben-1080x405.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="1080" height="405">
        </picture>

    </div>

    <div class="teaser__content">

        <h4 class="teaser__headline">
            Teaser-Headline

        </h4>

        <div class="teaser__text">
            Dies ist ein kurzer Teaser-Text

        </div>

    </div>

</div>

<img src="../../images/4x3/abstimmung-des-verwaltungsrats-712x534.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy" width="600" height="450">

<br />
<img src="../../images/4x3/eltern-kind-blumen-712x534.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy" width="600" height="450">

<div class="o-slider glide js-slider-init slider--picture-gallery" data-slider-type="picture-gallery" data-glide-config="{&quot;autoplay&quot;:  }">

    <h2 class="slider__headline slider__headline--h2">Testslider (Bilder ggf. unproportional)</h2>

    <div class="slider__detailtext">
        <p>Ein optionaler Text</p>

        <p>Eine neue Zeile.</p>
    </div>

    <div class="slider__area">

        <div class="slider__track-wrapper">

            <div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls" aria-hidden="true">
                <button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
                <button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
            </div>

            <div class="slider__track glide__track slider__track--picture-gallery" data-glide-el="track">
                <ul class="glide__slides slider__slides--picture-gallery" aria-label="Karusell mit 11 Bilder">
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture ">
                                <source media="(max-width: 640px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg" width="960" height="540">
                                <source media="(min-width: 641px)" srcset="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg" width="960" height="540">
                                <img src="../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="540">
                            </picture>

                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture ">
                                <source media="(max-width: 640px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg" width="960" height="540">
                                <source media="(min-width: 641px)" srcset="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg" width="960" height="540">
                                <img src="../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="540">
                            </picture>

                        </figure>

                    </li>
                    <li class="glide__slide slider__slide--picture-gallery">
                        <figure class="m-figure ">

                            <picture class="a-picture ">
                                <source media="(max-width: 640px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" width="960" height="540">
                                <source media="(min-width: 641px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" width="960" height="540">
                                <img src="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy" width="960" height="540">
                            </picture>

                            <figcaption class="figure__figcaption ">
                                <p>Bild Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift3</p>
                            </figcaption>
                        </figure>

                    </li>
                </ul>
            </div>

        </div>

    </div>

</div>


        <style>
  .page > .teaser--bannermodule {
    color: #d6d9dc;
  }
</style>

{{render '@bannermodule--default' this.partials.txtDefault merge=true}}

{{# this.switches.isSliderOnly }}
  {{render '@slider--picture-gallery' this.partials.slider1 merge=true}}
  {{render '@bannermodule--default' merge=true}}
  {{render '@teaser' this.partials.teaser1 this.partials.image2 merge=true }}
  {{render '@teaser' this.partials.teaser1 this.partials.image3 merge=true }}
  {{render '@slider--picture-gallery' this.partials.slider2 merge=true}}
{{/ this.switches.isSliderOnly }}

{{^ this.switches.isSliderOnly }}
  {{# this.switches.hasTopSlider }}
    {{render '@slider--picture-gallery' this.partials.slider1 merge=true}}
    {{render '@bannermodule--default' merge=true}}
  {{/ this.switches.hasTopSlider }}

  {{render '@image' this.partials.image1 merge=true}}

  {{render '@bannermodule--default' merge=true}}
  {{render '@teaser' this.partials.teaser1 merge=true }}

  {{render '@bannermodule--default' this.partials.txtANoButton merge=true}}
  {{render '@teaser' this.partials.teaser2 merge=true }}

  {{render '@bannermodule--default' this.partials.txtBPrimary merge=true}}
  {{render '@teaser' this.partials.teaser2 merge=true }}

  {{render '@bannermodule--default' this.partials.txtCSecondary merge=true}}
  {{render '@teaser' this.partials.teaser2 merge=true }}

  {{render '@bannermodule--default' this.partials.txtDConversion merge=true}}
  {{render '@teaser' this.partials.teaser3 merge=true }}

  {{render '@bannermodule--default' this.partials.txtSmall merge=true}}
  {{render '@teaser' this.partials.teaser3 merge=true }}

  {{render '@bannermodule--default' this.partials.txtDocking merge=true}}
  {{render '@teaser' this.partials.teaser3 merge=true }}

  {{render '@bannermodule--default' this.partials.txtTestimonial merge=true}}
  {{render '@teaser' this.partials.teaser4 merge=true }}

  {{render '@bannermodule--default' this.partials.txtTestimonial2Paragraphs merge=true}}
  {{render '@teaser' this.partials.teaser4 merge=true }}

  {{render '@bannermodule--default' this.partials.txtTestimonialNoSource merge=true}}
  {{render '@teaser' this.partials.teaser4 merge=true }}


  {{render '@bannermodule--default' this.partials.txtTestimonial merge=true}}
  {{render '@teaser' this.partials.teaser5 merge=true }}

  {{render '@bannermodule--default' this.partials.txtTestimonial2Paragraphs merge=true}}
  {{render '@teaser' this.partials.teaser5 merge=true }}

  {{render '@bannermodule--default' this.partials.txtTestimonialNoSource merge=true}}
  {{render '@teaser' this.partials.teaser5 merge=true }}


  {{render '@bannermodule--default' this.partials.txtTestimonial merge=true}}
  {{render '@teaser' this.partials.teaser6 merge=true }}

  {{render '@bannermodule--default' this.partials.txtTestimonial2Paragraphs merge=true}}
  {{render '@teaser' this.partials.teaser6 merge=true }}

  {{render '@bannermodule--default' this.partials.txtTestimonialNoSource merge=true}}
  {{render '@teaser' this.partials.teaser6 merge=true }}

  {{render '@image' this.partials.image2 merge=true }}
  <br />
  {{render '@image' this.partials.image3 merge=true }}

  {{render '@slider--picture-gallery' this.partials.slider2 merge=true}}
{{/ this.switches.isSliderOnly }}


        
            
            {
  "switches": {
    "hasContactFlyout": "true",
    "hasTopSlider": false,
    "isSliderOnly": false
  },
  "content": {
    "alertText": "Die Sitzung wurde erfolgreich verlängert"
  },
  "partials": {
    "sessionMetadata": {
      "content": {
        "expiredDialogId": "bm-dialog-session-expired",
        "expiringDialogId": "bm-dialog-session-expiring"
      }
    },
    "expiring": {
      "switches": {
        "hidden": true,
        "secondaryButton": true
      },
      "content": {
        "id": "bm-dialog-session-expiring",
        "text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
      },
      "partials": {
        "primaryButton": {
          "content": {
            "label": "Login verlängern"
          }
        },
        "secondaryButton": {
          "content": {
            "label": "Logout"
          }
        }
      }
    },
    "expired": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-dialog-session-expired"
      }
    },
    "modalVideo": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-video"
      },
      "viewtypes": {
        "specifier": "modal--video"
      },
      "partials": {
        "consent": {
          "viewtypes": {
            "specifier": "consent--in-modal"
          }
        },
        "videoFigure": {
          "switches": {
            "hasHeadline": false,
            "hasFigcaption": false,
            "hasVideo": false
          }
        }
      }
    },
    "image1": {
      "content": {
        "sourceUrl": "../../images/4x3/mann-mit-tablet.jpg",
        "alt": "Dies ist ein alternativ Text",
        "width": 508,
        "height": 382
      }
    },
    "image2": {
      "content": {
        "sourceUrl": "../../images/4x3/abstimmung-des-verwaltungsrats-712x534.jpg",
        "alt": "Dies ist ein alternativ Text",
        "width": 600,
        "height": 450
      }
    },
    "image3": {
      "content": {
        "sourceUrl": "../../images/4x3/eltern-kind-blumen-712x534.jpg",
        "alt": "Dies ist ein alternativ Text",
        "width": 600,
        "height": 450
      }
    },
    "teaser1": {
      "partials": {
        "picture": {
          "content": {
            "sources": [
              {
                "media": "(max-width: 640px)",
                "srcset": "../../images/8x3/mutter-kind-schoss-1080x405.jpg",
                "width": 1080,
                "height": 405
              },
              {
                "media": "(min-width: 641px)",
                "srcset": "../../images/8x3/mutter-kind-schoss-1080x405.jpg",
                "width": 1080,
                "height": 405
              }
            ],
            "img": {
              "src": "../../images/8x3/mutter-kind-schoss-1080x405.jpg",
              "alt": "Dies ist ein alternativ Text",
              "width": 1080,
              "height": 405
            }
          }
        }
      }
    },
    "teaser2": {
      "partials": {
        "picture": {
          "content": {
            "sources": [
              {
                "media": "(max-width: 640px)",
                "srcset": "../../images/8x3/frau-arm-pflaster-1080x405.jpg",
                "width": 1080,
                "height": 405
              },
              {
                "media": "(min-width: 641px)",
                "srcset": "../../images/8x3/frau-arm-pflaster-1080x405.jpg",
                "width": 1080,
                "height": 405
              }
            ],
            "img": {
              "src": "../../images/8x3/frau-arm-pflaster-1080x405.jpg",
              "alt": "Dies ist ein alternativ Text",
              "width": 1080,
              "height": 405
            }
          }
        }
      }
    },
    "teaser3": {
      "partials": {
        "picture": {
          "content": {
            "sources": [
              {
                "media": "(max-width: 640px)",
                "srcset": "../../images/8x3/frau-tablet-arzt-1080x405.jpg",
                "width": 1080,
                "height": 405
              },
              {
                "media": "(min-width: 641px)",
                "srcset": "../../images/8x3/frau-tablet-arzt-1080x405.jpg",
                "width": 1080,
                "height": 405
              }
            ],
            "img": {
              "src": "../../images/8x3/frau-tablet-arzt-1080x405.jpg",
              "alt": "Dies ist ein alternativ Text",
              "width": 1080,
              "height": 405
            }
          }
        }
      }
    },
    "teaser4": {
      "partials": {
        "picture": {
          "content": {
            "sources": [
              {
                "media": "(max-width: 640px)",
                "srcset": "../../images/8x3/grafik-rubrik-frage-1080x405.png",
                "width": 1080,
                "height": 405
              },
              {
                "media": "(min-width: 641px)",
                "srcset": "../../images/8x3/grafik-rubrik-frage-1080x405.png",
                "width": 1080,
                "height": 405
              }
            ],
            "img": {
              "src": "../../images/8x3/grafik-rubrik-frage-1080x405.png",
              "alt": "Dies ist ein alternativ Text",
              "width": 1080,
              "height": 405
            }
          }
        }
      }
    },
    "teaser5": {
      "partials": {
        "picture": {
          "content": {
            "sources": [
              {
                "media": "(max-width: 640px)",
                "srcset": "../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
                "width": 822,
                "height": 308
              },
              {
                "media": "(min-width: 641px)",
                "srcset": "../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
                "width": 822,
                "height": 308
              }
            ],
            "img": {
              "src": "../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
              "alt": "Dies ist ein alternativ Text",
              "width": 822,
              "height": 308
            }
          }
        }
      }
    },
    "teaser6": {
      "partials": {
        "picture": {
          "content": {
            "sources": [
              {
                "media": "(max-width: 640px)",
                "srcset": "../../images/8x3/eltern-sohn-toben-1080x405.jpg",
                "width": 1080,
                "height": 405
              },
              {
                "media": "(min-width: 641px)",
                "srcset": "../../images/8x3/eltern-sohn-toben-1080x405.jpg",
                "width": 1080,
                "height": 405
              }
            ],
            "img": {
              "src": "../../images/8x3/eltern-sohn-toben-1080x405.jpg",
              "alt": "Dies ist ein alternativ Text",
              "width": 1080,
              "height": 405
            }
          }
        }
      }
    },
    "txtDefault": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Default: Always image LAZY LOADING (the new default)",
            "richtext": "<p>@stage-teaser--default</p>"
          }
        }
      }
    },
    "txtSmall": {
      "partials": {
        "content": {
          "headline": "Stage Teaser - Small",
          "richtext": "<p>@stage-teaser--small</p>"
        }
      }
    },
    "txtDocking": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Docking-Container/Siegelliste",
            "richtext": "<p>@stage-teaser--with-docking</p>"
          }
        }
      }
    },
    "txtTestimonial": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, normale Ausprägung",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "txtTestimonial2Paragraphs": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, 2 Absätze",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "txtTestimonialNoSource": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, ohne Zitatquelle",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "txtTestimonialNoText": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Stage Teaser - mit Zitat, ohne Zitattext",
            "richtext": "<p>@stage-teaser--with-testimonial</p>"
          }
        }
      }
    },
    "slider1": {
      "content": {
        "title": "Testslider (Bilder ggf. unproportional)"
      },
      "partials": {
        "slide": [
          {
            "switches": {
              "hasFigcaption": true
            },
            "content": {
              "captionText": "<p>Optional Bildunterschrift - Bild 1</p>"
            },
            "partials": {
              "picture": {
                "content": {
                  "sources": [
                    {
                      "media": "(max-width: 640px)",
                      "srcset": "../../images/3x2/barmer-app-yeah.jpg",
                      "width": 496,
                      "height": 331
                    },
                    {
                      "media": "(min-width: 641px)",
                      "srcset": "../../images/3x2/barmer-app-yeah.jpg",
                      "width": 496,
                      "height": 331
                    }
                  ],
                  "img": {
                    "src": "../../images/3x2/barmer-app-yeah.jpg",
                    "alt": "Dies ist ein alternativ Text",
                    "width": 496,
                    "height": 331
                  }
                }
              }
            }
          },
          {
            "switches": {
              "hasFigcaption": false
            },
            "content": {
              "captionText": "<p>Bild 2</p>"
            },
            "partials": {
              "picture": {
                "content": {
                  "sources": [
                    {
                      "media": "(max-width: 640px)",
                      "srcset": "../../images/3x2/mann-mit-kind.jpg",
                      "width": 608,
                      "height": 405
                    },
                    {
                      "media": "(min-width: 641px)",
                      "srcset": "../../images/3x2/mann-mit-kind.jpg",
                      "width": 608,
                      "height": 405
                    }
                  ],
                  "img": {
                    "src": "../../images/3x2/mann-mit-kind.jpg",
                    "alt": "Dies ist ein alternativ Text",
                    "width": 608,
                    "height": 405
                  }
                }
              }
            }
          },
          {
            "switches": {
              "hasFigcaption": true
            },
            "content": {
              "captionText": "<p>Bild Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift3</p>"
            },
            "partials": {
              "picture": {
                "content": {
                  "sources": [
                    {
                      "media": "(max-width: 640px)",
                      "srcset": "../../images/3x2/mann-mit-tablet.jpg",
                      "width": 547,
                      "height": 365
                    },
                    {
                      "media": "(min-width: 641px)",
                      "srcset": "../../images/3x2/mann-mit-tablet.jpg",
                      "width": 547,
                      "height": 365
                    }
                  ],
                  "img": {
                    "src": "../../images/3x2/mann-mit-tablet.jpg",
                    "alt": "Dies ist ein alternativ Text",
                    "width": 547,
                    "height": 365
                  }
                }
              }
            }
          }
        ]
      }
    },
    "slider2": {
      "content": {
        "title": "Testslider (Bilder ggf. unproportional)"
      },
      "partials": {
        "slide": [
          {
            "switches": {
              "hasFigcaption": false
            },
            "content": {
              "captionText": "<p>Bild 2</p>"
            },
            "partials": {
              "picture": {
                "switches": {
                  "hasLazyLoading": true
                },
                "content": {
                  "sources": [
                    {
                      "media": "(max-width: 640px)",
                      "srcset": "../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg",
                      "width": 960,
                      "height": 540
                    },
                    {
                      "media": "(min-width: 641px)",
                      "srcset": "../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg",
                      "width": 960,
                      "height": 540
                    }
                  ],
                  "img": {
                    "src": "../../images/16x9/960/seniorenpaar-beim-joggen-im-wald.jpg",
                    "alt": "Dies ist ein alternativ Text",
                    "width": 960,
                    "height": 540
                  }
                }
              }
            }
          },
          {
            "switches": {
              "hasFigcaption": false
            },
            "content": {
              "captionText": "<p>Bild 2</p>"
            },
            "partials": {
              "picture": {
                "switches": {
                  "hasLazyLoading": true
                },
                "content": {
                  "sources": [
                    {
                      "media": "(max-width: 640px)",
                      "srcset": "../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg",
                      "width": 960,
                      "height": 540
                    },
                    {
                      "media": "(min-width: 641px)",
                      "srcset": "../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg",
                      "width": 960,
                      "height": 540
                    }
                  ],
                  "img": {
                    "src": "../../images/16x9/960/ein-junger-mann-sitzt-in-einem-buero-am-schreibtisch-und-schaut-in-die-kamera-.jpg",
                    "alt": "Dies ist ein alternativ Text",
                    "width": 960,
                    "height": 540
                  }
                }
              }
            }
          },
          {
            "switches": {
              "hasFigcaption": true
            },
            "content": {
              "captionText": "<p>Bild Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift Optional Bildunterschrift3</p>"
            },
            "partials": {
              "picture": {
                "content": {
                  "sources": [
                    {
                      "media": "(max-width: 640px)",
                      "srcset": "../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg",
                      "width": 960,
                      "height": 540
                    },
                    {
                      "media": "(min-width: 641px)",
                      "srcset": "../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg",
                      "width": 960,
                      "height": 540
                    }
                  ],
                  "img": {
                    "src": "../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg",
                    "alt": "Dies ist ein alternativ Text",
                    "width": 960,
                    "height": 540
                  }
                }
              }
            }
          }
        ]
      }
    }
  }
}

Handle: @test-image-loading--default
Variants (8): Default , Default With Slider , First Not Lazy , First Not Lazy With Slider , No Lazy , No Lazy With Slider , Slider Lazy , Slider Not Lazy
Preview:
- With layout
- Component only
Filesystem Path: src/components/pages/test-image-loading.hbs
References (4): @bannermodule--default, @slider--picture-gallery, @teaser, @image

No notes defined.