https://github.com/bradoyler/another-responsive-image-hack
An ultra-light (lib-free) responsive image technique ~works in IE8~
https://github.com/bradoyler/another-responsive-image-hack
Last synced: 18 days ago
JSON representation
An ultra-light (lib-free) responsive image technique ~works in IE8~
- Host: GitHub
- URL: https://github.com/bradoyler/another-responsive-image-hack
- Owner: bradoyler
- License: mit
- Created: 2014-10-26T01:29:44.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-12-19T15:35:56.000Z (over 10 years ago)
- Last Synced: 2025-02-13T05:41:46.622Z (2 months ago)
- Homepage: http://bradoyler.github.io/another-responsive-image-hack/
- Size: 199 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Yet another responsive image hack
=============================
An ultra-light responsive image technique that even works in IE8
```html
// minify and inline this after the targeted img tags
function adaptImages(viewportwidth, selector, breakpoints){
for(var i=0;i<breakpoints.length;i++) {
var startwidth = breakpoints[i], nextIdx = i+1, nextwidth = '99999';
if(breakpoints[nextIdx]) {
nextwidth = breakpoints[nextIdx];
}
if(viewportwidth>=startwidth && viewportwidth < nextwidth) {
var imgs = document.querySelectorAll(selector);
for(var j=0;j<imgs.length;j++) {
imgs[j].setAttribute('src',imgs[j].getAttribute('data-bp'+ i));
}
break;
}
}
};
// gets viewport dimensions
function viewport() {
var t=window,n="inner";
if(!("innerWidth"in window)) {
n="client";t=document.documentElement||document.body
}
return { width:t[n+"Width"], height:t[n+"Height"]};
};
// call adaptImages with screen width, img selector & breakpoints
adaptImages(viewport().width, '.js-adaptive-img', [0,768,992,1230]);
// u *could* attach this to window.onresize event
```
#### Thats it.
This was intended to be a performant technique for 'above the fold' responsive images.
#### [Demo](http://bradoyler.github.io/another-responsive-image-hack/)