Question

I’ve been looking at PPK’s article here as, perhaps, a more efficient way of loading the proper images when using media queries. The main way that he suggests loading them is pairing JS with CSS. So the code would look like this:

@media all and (max-width: 900px) {
// styles go here for screen widths less than 900px wide
}

if (document.documentElement.clientWidth < 900) {
// script to load the images goes here for screen widths less than 900px wide
} 

What I’m trying to figure out is, what’s the best way to load the images? Is it the old skool way of using new Image() or is appending stuff with jQuery the way to go? Is there one that’s less of a server strain than the other?

Thanx in advannce…

Answer 1

Server strain? Either way you are delivering image data, and there aren’t a whole lot of ways to do that. You simply make a request for each image and the server responds. Best you can do is make sure the images are being served with proper Cache-Control headers.

var img = new Image();
img.onload = function() {
  alert('woot');
};
img.src = url;

It’s simple, easy to do in a loop, and can handle callbacks when they are done.