srcadapt is responsive image tool aimed to provide user with method for specifying different image sources according to different screen sizes. It uses well known Bootstrap's viewport nomenclature which, in short, means:
if you know how to use Bootstrap's grid, than you already know how to use srcadapt
Include <script src="path/to/srcadapt.js"></script> somewhere before first usage. Add srcadapt class and two or more data-[dimension] attributes to <img /> element which src attribute is aimed to be "adapted". Call srcadapt.all() to adapt all designated images or srcadapt(HTMLImageElement | HTMLCollection | querySelectorAll string) specify exactly which one(s).
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="" class="srcadapt"
data-xs="images/imageofmax767px.jpg"
data-sm="images/imageofmin768.jpg"
data-md="images/imageofmin992.jpg"
data-lg="images/imageofmin1200.jpg" />You have noticed that this image contains transparent 1x1px GIF as src. That is going to be "adapted". You have also noticed data-xs, data-sm, data-md, data-lg attributes which means, for those who haven't used Bootstrap's grid system:
| attr | meaning |
|---|---|
| data-xs | image applies to max width of 767px |
| data-sm | applies to min width of 768px |
| data-md | applies to min width of 992px |
| data-lg | applies to min width of 1200px |
No. You might just specify one "mobile" (data-xs) image and one data-sm for all other sizes.
In order for appropriate image to appear as soon as possible, you should call functions as soon as <img> markup appears.
Fastest (and ugliest) way is to insert script tag right after img, like this:
<img id="myImg" src="images/some-default-image.jpg" alt="" class="srcadapt"
data-xs="images/imageofmax767px.jpg"
data-sm="images/imageofmin768.jpg"
data-md="images/imageofmin992.jpg"
data-lg="images/imageofmin1200.jpg" />
<script>srcadapt( document.getElementById('myImg') )</script>just what should happen, all images gets updated.
in short, works in IE8. Tested on:
- Chrome current,
- Firefox current,
- Safari 5.1,
- IE 8,9,10,11
- Android 4.3
| method | desc |
|---|---|
| srcadapt | global scope variable, main method and space for others |
| srcadapt.all() | iterates DOM, updates ('adapts') or leaves images alone |
| srcadapt.onAdapt(callback) | adds callback to be executed whenever any image gets 'adapted' |
| srcadapt.offAdapt(callback) | removes callback from being executed whenever any image gets 'adapted' |
One word: TESTS.