@e-fellows/website-2022

Bild: Ohne Lazyloading 

<picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
    <source srcset="https://bildermangel.de/1380x776/fe7c09/130f26.webp?text=+++M:+690x388@2x+++ 2x, https://bildermangel.de/690x388/fe7c09/130f26.webp?text=+++M:+690x388@1x+++ 1x" media="(min-width: 512px) and (max-width: 767px)">
    <source srcset="https://bildermangel.de/1760x990/fe7c09/130f26.webp?text=+++L:+880x495@2x+++ 2x, https://bildermangel.de/880x495/fe7c09/130f26.webp?text=+++L:+880x495@1x+++ 1x" media="(min-width: 768px) and (max-width: 1023px)">
    <source srcset="https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++ 2x, https://bildermangel.de/1024x576/fe7c09/130f26.webp?text=+++XL:+1024x576@1x+++ 1x" media="(min-width: 1024px)">
    <img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" srcset="https://bildermangel.de/940x528/fe7c09/130f26.webp?text=+++S:+470x264@2x+++ 2x" width="470" height="264" alt="Das ist ein Platzhalter-Bild" />
</picture>
 
{% set lazy = lazy ?? true %}
{% set decorative = decorative ?? false %}
{% set alt = alt ?? null %}
{% set placeholder = disablePlaceholder|default ? false : (placeholder ?? false) -%}

<picture {{ html_attributes({
  class: {
    'image': true,
    'image--cover': cover ?? false,
  },
  style: placeholder ? "background-image: url(#{placeholder})",
}, attrs ?? {}) }}>
  {% for source in sources|default %}
    <source {{ html_attributes({
      srcset: source.srcset2x|default ? "#{source.srcset2x} 2x, #{source.srcset} 1x" : source.srcset,
      media: source.media ?? false,
      type: source.type ?? false,
      width: source.width ?? false,
      height: source.height ?? false,
      sizes: source.sizes ?? false,
    }) }}>
  {% endfor -%}

  <img {{ html_attributes({
    class: 'image__img',
    src: src,
    srcset: src2x|default ? "#{src2x} 2x" : (srcset ?? false),
    sizes: sizes ?? false,
    width: width ?? false,
    height: height ?? false,
    alt: decorative ? '' : alt,
    loading: lazy ? 'lazy' : null,
    fetchpriority: fetchpriority ?? false,
    role: decorative or alt == '' ? 'presentation' : null,
  }) }} />
</picture>
 
{
  "src": "https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++",
  "width": 470,
  "height": 264,
  "alt": "Das ist ein Platzhalter-Bild",
  "src2x": "https://bildermangel.de/940x528/fe7c09/130f26.webp?text=+++S:+470x264@2x+++",
  "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC",
  "sources": [
    {
      "srcset": "https://bildermangel.de/690x388/fe7c09/130f26.webp?text=+++M:+690x388@1x+++",
      "srcset2x": "https://bildermangel.de/1380x776/fe7c09/130f26.webp?text=+++M:+690x388@2x+++",
      "media": "(min-width: 512px) and (max-width: 767px)"
    },
    {
      "srcset": "https://bildermangel.de/880x495/fe7c09/130f26.webp?text=+++L:+880x495@1x+++",
      "srcset2x": "https://bildermangel.de/1760x990/fe7c09/130f26.webp?text=+++L:+880x495@2x+++",
      "media": "(min-width: 768px) and (max-width: 1023px)"
    },
    {
      "srcset": "https://bildermangel.de/1024x576/fe7c09/130f26.webp?text=+++XL:+1024x576@1x+++",
      "srcset2x": "https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++",
      "media": "(min-width: 1024px)"
    }
  ],
  "lazy": false
}
  • Content: 
    .image {
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  flex-grow: 1;
  line-height: 0;
  max-block-size: var(--image-max-height, none);
  max-inline-size: var(--image-max-width, none);
  position: relative;
}

.image--cover {
  overflow: hidden;
}

.image__img {
  block-size: auto;
  display: block;
  font-size: 1.4rem;
  inline-size: 100%;
  position: relative;
  transition-duration: var(--duration-long);
  transition-property: opacity;
  z-index: 2;

  .js & {
    opacity: 0;
  }

  .js .image--loaded & {
    opacity: 1;
  }

  .image--cover & {
    block-size: 100%;
    inline-size: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    scale: var(--image-cover-zoom, 1);
    transition-duration: var(--image-cover-zoom-duration, var(--duration-fast));
    transition-property: scale;
  }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/components/1-atoms/image/image.scss
  • Size: 850 Bytes
  • Content: 
    import onLoad from '../../../javascripts/utils/onLoad';
import whenReady from '../../../javascripts/utils/whenReady';

whenReady().then(() => {
  const setLoaded = ($image: HTMLElement) => {
    const $container = $image.closest<HTMLPictureElement>('.image');

    if ($container) {
      $image.addEventListener(
        'transitionend',
        () => {
          $container.style.backgroundImage = '';
        },
        { once: true },
      );

      $container.classList.add('image--loaded');
    }
  };

  onLoad<HTMLImageElement>('.image__img', ($image) => {
    if ($image.complete && $image.naturalHeight !== 0) {
      setLoaded($image);
    }
  });

  document.addEventListener(
    'load',
    (event) => {
      const { target: $image } = event;

      if ($image instanceof HTMLElement && $image.matches('.image__img')) {
        setLoaded($image);
      }
    },
    {
      capture: true,
    },
  );
});
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/components/1-atoms/image/image.ts
  • Size: 921 Bytes

No notes defined.