EnquireJS and jQuery : swapping image sources depending on media query

[TrickyTricks]

I am trying to swap image sources depending on media query with jQuery and EnquireJS and data-* tags like mentioned in this post.

https://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

I have come up with a working solution that you can check out here.

https://jsfiddle.net/k0a00s13/

Now what I am wondering is how I could improve this approach?

I don’t want to use special responsive image HTML markup and specifically want to do this with EnquireJS and jQuery.

This also since I have to support IE8 and don’t want to use a lot of polyfills and add complicated code either to the HTML or CSS for having responsive images. I think at this stage the many solutions for responsive images are far from perfect and there is no universal way of using them while still being able to support older browsers. This is lead me to make the conscious decision that if I already anyways have jQuery and EnquireJS included as script and library I might as well use that for a simple straight forward approach with responsive images.

I know that for production I will take into account retina displays and define those with EnquireJS and HTML data-* tags, meaning users with mobile devices and a retina screen will actually get a high quality image instead of a low resolution image.

What else can I do here?

Should I include a low-resolution version as standard version for the image source in the HTML? Currently it is left empty on purpose to NOT download even the low-resolution version but let EnquireJS decide immediately what resolution the image has according to the media query and device pixel density and serve that.

I also like to refrain from having a placeholder or loading GIF as the standard image source because of this great post by Luke Wroblewski.

http://www.lukew.com/ff/entry.asp?1797

So, how would you improve on this approach? Would you include a low-resolution image in the HTML and let EnquireJS and jQuery load the best resolution image over it once it is available? What else comes to mind when see this concept? Total fail or somewhat decent? Please take into account supporting IE8 and that I specifically like to do this with EnquireJS and jQuery, thank you.

[Author]

Posts