This function loops through all images on the page, and serves the appropriately sized image file from a list in a data attribute.
example link: http://total.maloweb.com/responsive
example html:
<img src="default.png" data-widths="400,600,800,1023" data-srcsuffix="-foo.png">
example javascript:
onload=onresize=function(){
respImg("data-widths","data-srcsuffix")
}
example filenames:
400-foo.png
600-foo.png
800-foo.png
1023-foo.png
| function(x,y, //x:attribute name for widths, y:attribute name for suffix | |
| a,c,d,b,e,f,g){ //placeholders | |
| for(d in f=document.images)if(a=f[d],g=a.getAttribute(x)){ //for every image with a width list | |
| b=g.split(","); //split width list into array | |
| for(c=b.length;c--;) //for every width | |
| if(e=b[0],b[c]<a.offsetWidth){ //set lowest width as default(e), when the loop encounters a width smaller than the image: | |
| e=b[c+1]||b[c];break} //set e to one width higher, or the highest width available | |
| a.src=e+a.getAttribute(y) //set src attribute to the right width | |
| } | |
| } |
| function(x,y,a,c,d,b,e,f,g){for(d in f=document.images)if(a=f[d],g=a.getAttribute(x)){b=g.split(",");for(c=b.length;c--;)if(e=b[0],b[c]<a.offsetWidth){e=b[c+1]||b[c];break}a.src=e+a.getAttribute(y)}} |
| { | |
| "name": "respImg", | |
| "description": "Responsive image loading", | |
| "keywords": [ | |
| "responsive", | |
| "conditional", | |
| "image", | |
| "loading" | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <a href="http://total.maloweb.com/responsive">click link for example</a> |
@atk it doesn't work at all now... it either returns "undefined-suffix.png" or "NaN"
I'll have a look into the problem later.
OK, got this now. Forgot that there was no resolution beyond the last one. 176bytes now:
function(x,y,d,e,f,g,h){for(d in f=document.images)for(e in h=((d=f[d])[g='getAttribute']&&(d[g](x)||'').split(',')))if(h[e]<d.offsetWidth){d.src=(h[e+1]||h[e])+d[g](y);break}}
Currently, I am trying to get rid of split, because it's too long. Not sure if this will work, but it goes around the lines of:
function(x,y,d,e,f,g,h,i){for(d in f=document.images)for(d=f[d],e=d.offsetWidth,h=/d+/g;i<e&&(i=h.exec(e&&d[g='getAttribute'](x)||g)[0]||i););i&&(d.src=i+d[g](y))}
@atk the latest two don't work as well...
I'll have to copy your test page so I could test myself...
Can you drop the prefix and simply use "default.png", "400-default.png" and so on as filenames?
@maettig
Sure?
Just a suggestion. I don't know if this is what you want. Simply write <img src="default.png" data-widths="400,600,800,1023"> and use a.src=e+'-'+a.src instead of a.src=e+a.getAttribute(y).
@maettig
Thats a brilliant idea! I'll implement it when I have the time!
Edit:
I just remembered why I didn't do this.
The browser loads the default automatically.
So to prevent loading a useless image, you have to either put no src attribute, or make the src a data url of a one pixel gif or something.
My idea 136 bytes: (posted from my phone, not tested)
function respImg(s,u,d,l){document.images.map(a=>{d=a.dataset,for(l=d[s].split(',');l.length||a.offsetWidth>w=l.shift();)a.src=w+d[u]})}
OK, will have to look into this later. This will probably require to revert the resolution numbers to the former order. Do I get it right in that case that it should always be the resolution 1 notch above (and not below, like it is now) the current one?
Update: made a mix of both of our codes (168bytes):
Another update: rethought my regex version (161bytes):
Last update (depending on the former one): sneaky abuse of string value comparison (159bytes):