README
AB-interchange
AB-interchange is a small, dependency free and vanilla script to:
- lazy load images and background-images
- give responsiveness to background-images
It's damn small: about 2.6KB (uglyfied and GZipped).
Have a look at this Demonstration page (offline version in the docs
folder).
Version 1 is used on French websites of ENGIE and Gaz tarif règlementé.
Important news
- removed
<img>
and<picture>
support since it's natif and useless on IE 11. - removed
delayed
option that was quite useless and introduced code complexity
Install
npm install --save ab-interchange
Setup
Import it in your JS bundle (webpack, ES6, browserify…):
import abInterchange from 'ab-interchange';
(If you are not building your assets, simply load the script AB-interchange.min.js
in the dist
folder.)
Usage
Follow AB-mediaQuery readme file to configure it the way you like depending on your needs. For exemple:
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)'
}
});
Then initialize interchange
with some options.
AB.plugins.interchange({
mode: 'lazy-img',
lazySettings: {
offscreen: 1.25,
layout: 'fluid' // can be "fixed" to fixed dimensions (not fluid)
}
});
mode
can be:lazy-img
background
lazy-background
lazySettings
are for lazy modes:offscreen
: load picture only when in the viewport *offscreen
valuelayout
: Can befluid
(default) for fluid images orfixed
for fixed dimensions
Use data-ab-interchange
attribute to pass specific options on an element if needed.
data-ab-interchange-src
attribute is where you define different sources and breakpoints defined with AB-mediaQuery.
It should contain a list of arrays with the path to the asset and the breakpoint name. Beware to respect mobile first order. Order is VERY important!
Examples
Lazy loading of img
<div
alt=""
width="100"
height="75"
data-ab-interchange='{
"mode": "lazy-img",
"lazySettings": {
"offscreen": 1,
}
}"'
data-ab-interchange-src="[xxx, smallOnly], [xxx, medium]">
</div>
If your images have different ratio depending on media query you can provide a JSON on width
and height
attributes:
width='{"smallOnly": 20, "medium": 50}'
height='{"smallOnly": 20, "medium": 50}'
background-image
<div
data-ab-interchange='{"mode": "background"}'
data-ab-interchange-src="[xxx, smallOnly], [xxx, medium]">
</div>
Lazy load background-image
<div
data-ab-interchange='{"mode": "lazy-background"}'
data-ab-interchange-src="[xxx, smallOnly], [xxx, medium]">
</div>
JS event
replaced.ab-interchange
event is automatically triggered when when an image/background-image update.
window.addEventListener('replaced.ab-interchange', function(e){
console.log(e.detail.element);
});