ab-interchange
Version:
AB-interchange: While responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content.
286 lines (270 loc) • 11.8 kB
HTML
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AB-interchange example</title>
<link rel="stylesheet" href="styles.css">
<script defer src="../index.js"></script>
<script defer src="example.js"></script>
</head>
<body class="helvetica h-100">
<div class="mw8 center flex flex-column h-100">
<header class="pa2 pa4-ns bg-dark-blue flex-ns items-center justify-between">
<h1 class="white ma0">AB-interchange</h1>
<p class="lightest-blue">
Demonstration page, details on <a class="b link no-underline underline-hover pink" href="https://github.com/lordfpx/AB-interchange">GitHub</a>
</p>
</header>
<main>
<div class="pa2 pa4-ns bg-lightest-blue">
<p>AB-interchange is a small, vanilla script to:</p>
<ul>
<li><b>lazy load</b> images and background-images</li>
<li>give responsiveness to <b>background-images</b></li>
</ul>
</div>
<div class="demo-wrapper pa2 pa4-ns">
<h2 class="dark-pink">Informations</h2>
<p>AB-mediaQuery is initilized with:</p>
<pre><code class="language-javascript">
AB.plugins.mediaQuery({
bp: {
smallOnly: 'screen and (max-width: 767px)',
mediumOnly: 'screen and (min-width: 768px) and (max-width: 1024px)',
medium: 'screen and (min-width: 768px)',
largeOnly: 'screen and (min-width: 1025px) and (max-width: 1280px)',
large: 'screen and (min-width: 1025px)'
}
});
</code></pre>
<p>AB-interchange is initilized with:</p>
<pre><code class="language-javascript">
AB.plugins.interchange({
lazySettings: {
offscreen: 1.25,
layout: 'fluid' // can be "fixed" to fixed dimensions (not fluid)
}
});
</code></pre>
<h2 class="dark-pink">Example</h2>
<h3 class="dark-pink">Responsive background-image</h3>
<div class="flex flex-wrap justify-center">
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=1, smallOnly], [https://picsum.photos/400/400?random=1, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=2, smallOnly], [https://picsum.photos/400/400?random=2, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=3, smallOnly], [https://picsum.photos/400/400?random=3, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=4, smallOnly], [https://picsum.photos/400/400?random=4, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=5, smallOnly], [https://picsum.photos/400/400?random=5, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=6, smallOnly], [https://picsum.photos/400/400?random=6, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=7, smallOnly], [https://picsum.photos/400/400?random=7, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=8, smallOnly], [https://picsum.photos/400/400?random=8, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=9, smallOnly], [https://picsum.photos/400/400?random=9, medium]"
></div>
</div>
<hr>
<h3 class="dark-pink">Responsive lazy background-image</h3>
<div class="flex flex-wrap justify-center">
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=21, smallOnly], [https://picsum.photos/400/400?random=21, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=22, smallOnly], [https://picsum.photos/400/400?random=22, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=23, smallOnly], [https://picsum.photos/400/400?random=23, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=24, smallOnly], [https://picsum.photos/400/400?random=24, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=25, smallOnly], [https://picsum.photos/400/400?random=25, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=26, smallOnly], [https://picsum.photos/400/400?random=26, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=27, smallOnly], [https://picsum.photos/400/400?random=27, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=28, smallOnly], [https://picsum.photos/400/400?random=28, medium]"
></div>
<div
class="outline w5 ma2"
style="height: 200px;"
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=29, smallOnly], [https://picsum.photos/400/400?random=29, medium]"
></div>
</div>
<hr>
<h3 class="dark-pink">Responsive lazy image</h3>
<div class="flex flex-wrap justify-center">
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=11, smallOnly], [https://picsum.photos/400/400?random=11, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=12, smallOnly], [https://picsum.photos/400/400?random=12, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=13, smallOnly], [https://picsum.photos/400/400?random=13, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=14, smallOnly], [https://picsum.photos/400/400?random=14, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=15, smallOnly], [https://picsum.photos/400/400?random=15, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=16, smallOnly], [https://picsum.photos/400/400?random=16, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=17, smallOnly], [https://picsum.photos/400/400?random=17, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=18, smallOnly], [https://picsum.photos/400/400?random=18, medium]">
</div>
</div>
<div class="outline w5 ma2">
<div
style="width: 100%;"
alt=""
width="200"
height="200"
data-ab-interchange='{"mode": "lazy-img"}'
data-ab-interchange-src="[https://picsum.photos/200/200?random=19, smallOnly], [https://picsum.photos/400/400?random=19, medium]">
</div>
</div>
</div>
</div>
</main>
<footer class="pa2 pa4-ns bg-dark-blue">
<p class="lightest-blue tc">
© 2019, Thierry Philippe (<a class="b link pink no-underline underline-hover" href="https://twitter.com/lordfpx">@lordfpx</a>)
</p>
</footer>
</div>
</body>
</html>