https://github.com/milosdjakonovic/srcadapt
Easy and lightweight responsive image tool
https://github.com/milosdjakonovic/srcadapt
images lazy-loading responsive responsive-images
Last synced: 3 months ago
JSON representation
Easy and lightweight responsive image tool
- Host: GitHub
- URL: https://github.com/milosdjakonovic/srcadapt
- Owner: milosdjakonovic
- License: mit
- Created: 2016-02-04T16:19:14.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-08T19:17:23.000Z (over 8 years ago)
- Last Synced: 2025-01-21T13:07:45.295Z (5 months ago)
- Topics: images, lazy-loading, responsive, responsive-images
- Language: JavaScript
- Homepage:
- Size: 1.08 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# srcadapt
[](https://badge.fury.io/gh/milosdjakonovic%2Fsrcadapt)
[](https://github.com/milosdjakonovic/srcadapt/issues)
### Easy and lightweight responsive image tool
`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
### TLDR; USAGE
Include `` somewhere before first usage. Add `srcadapt` class and two or more `data-[dimension]` attributes to `![]()
` 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).
### EXAMPLE
```html
```
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
##### -Do I have to use all 4 attrs?
No. You might just specify one "mobile" (`data-xs`) image and one `data-sm` for all other sizes.
### ASAP adapting
In order for appropriate image to appear as soon as possible, you should call functions as soon as `![]()
` markup appears.
Fastest (and ugliest) way is to insert `script` tag right after `img`, like this:
```html
srcadapt( document.getElementById('myImg') )
```
##### -What happens on resize?
just what should happen, all images gets updated.
#### Browser support
in short, works in IE8. Tested on:
- Chrome current,
- Firefox current,
- Safari 5.1,
- IE 8,9,10,11
- Android 4.3
### API
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'
## Contribution
One word: **TESTS**.