<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
<div class="lazyload-wrapper {{ wrapperClass }}">
<img
class="image lazyload {{ class }}"
src="{{ src }}"
data-src="{{ dataSrc }}"
alt="{{ alt }}"
{{ attributes }}
>
</div>
{
"src": "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=",
"dataSrc": "/images/banner/banner-480_480.png",
"alt": "image alt text"
}
$image__width : 100% !default;
$image__transition : $transition-fade !default;
$image__wrapper-background-color: $white !default;
.image {
display: block;
width: $image__width;
max-width: $image__width;
transition: $image__transition;
&.lazyload,
&.lazyloading {
opacity: 0;
}
&.lazyloaded {
opacity: 1;
}
}
img,
picture {
@extend .image;
}
.lazyload-wrapper {
position: relative;
background-color: $image__wrapper-background-color;
transition: $transition-base;
}
There are no notes for this item.