showcar-ui
Version:
Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.
40 lines (38 loc) • 1.92 kB
HTML
<ol>
<li>
<h3>As <code><img></code></h3>
<p><code><data-src></code> has an original image inside,<br /> <code><src></code> has an encoded 1x1
gray image to for background during loading</p><br />
<img data-src="https://placeimg.com/640/480?1"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="sc-lazy-image lazyload" alt="small random image">
</li>
<li>
<h3>As <code><picture></code></h3>
<p><code>data-src</code> has an original image in different resolutions,<br /> <code>src</code>
in <code><img></code> tag has a thumbnail image for background during loading</p>
<p>You only need to apply <code>class="lazyload"</code> to <code><img></code> tag</p><br />
<picture>
<source media="(max-width: 480px)" data-srcset="https://loremflickr.com/300/225?lock=1" type="image/jpeg">
<source media="(min-width: 769px)" data-srcset="https://loremflickr.com/1200/900?lock=1" type="image/jpeg">
<img class="lazyload" data-src="https://loremflickr.com/300/225?lock=1"
src="https://loremflickr.com/50/38?lock=1">
</picture>
</li>
<li>
<h3>As <code>background-image</code> (NOT recommended, please consider two first options as a better choice)
</h3>
<div class="dummy-placeholder lazyload"></div>
<style>
#lazy-image-target .sample .dummy-placeholder {
width: 300px;
height: 225px;
background-image: url('https://placeimg.com/50/38?1');
background-size: cover;
}
#lazy-image-target .sample .dummy-placeholder.lazyloaded {
background-image: url('https://placeimg.com/2200/1650?1');
}
</style>
</li>
</ol>