Welcome to the responsive images festivities :)
I have a slight issue with your solution (and all CSS based solutions) – In case that the CSS is external (which is the usual case), the speculative parser will not be able to start fetching images until the CSS is loaded, or if it did, it would have to terminate them in-flight or reissue them once it gets the « real » URL. That would practically render the speculative parser + preloader ineffective.
An HTML based solution would not have this issues. I once suggested ( http://blog.yoav.ws/2011/07/Simpler-responsive-images-proposal ) adding a media attribute to the base tag to basically add prefixes that would indicate the required image dimensions according to media queries.