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.
19 lines • 9.64 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.c3232da3.css"><script defer="" src="src.1da7a53e.js"></script><script defer="" src="example.7473e009.js"></script><link rel="stylesheet" href="example.fbf9c681.css"></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>