Last active
August 29, 2015 14:08
-
-
Save bradoyler/f68710cb0a63d7a4a7e3 to your computer and use it in GitHub Desktop.
Adaptive image <img> technique for above the fold images, using minimal inline js - DEMO http://jsbin.com/meroti/13 (works in IE8)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="adaptive img solution for above the fold images - using inline js" /> | |
| <meta charset="utf-8"> | |
| <title>Adaptive Img - JS Bin</title> | |
| </head> | |
| <body> | |
| <img class="js-adaptive-img" src='//:0' | |
| data-bp0='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-320-320.jpg' | |
| data-bp1='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-520-320.jpg' | |
| data-bp2='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-600-320.jpg' | |
| data-bp3='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-680-320.jpg'> | |
| <img class="js-adaptive-img" src='//:0' | |
| data-bp3='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-320-320.jpg' | |
| data-bp2='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-520-320.jpg' | |
| data-bp1='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-600-320.jpg' | |
| data-bp0='http://media2.s-nbcnews.com/j/newscms/2014_41/708631/141009-liberia-ebola-jsw-1158a_b58372304e3003a1bed177b8d90e126d.nbcnews-fp-680-320.jpg'> | |
| <script> | |
| 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)); | |
| } | |
| } | |
| } | |
| }; | |
| // 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"]}; | |
| }; | |
| adaptImages(viewport().width, '.js-adaptive-img', [0,768,992,1230]); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Idea would be to minify and inline the script block right after you "above-the-fold" images.