Heh… may I ask you what is the point of this? Because one would think that it’s to save bandwidth and shorten the time the page loads. So why would you always want to load all three of them? The display: none will NOT prevent the images from being loaded into the DOM. They will still be loaded – just not showing. Just load the biggest one, use CSS to fit 100% of the browser/container and the image will be scaled down by the browser automatically. That way you save the time of small and medium image load time. And that’s just for one image. Let’s say someone is visiting your blog page (from a mobile phone) with 20 posts showing on the page. With your method you would have to triple the amount of images you have to load from 20 to 60 (each in small, medium and large) – madness!
The other approach is to detect what windows size the user is actually using (via jQuery) and then load the specific image based on that. I’m sure you will figure it out since it’s not that dificult to write such a function in jQuery. For example below is one of my fn that I wrote for image replacement for retina devices. It works the same way – first it detects if the device is high pixel density and if it is it replaces the name in the image src from “normal” to “retina” therefore changing the image that loads:
jQuery(document).ready(function(){
if (window.devicePixelRatio > 1) {
var images = jQuery('img');
images.each(function(i) {
var lowres = jQuery(this).attr('src');
var highres = lowres.replace("normal", "retina");
jQuery(this).attr('src', highres);
});
}
});