I had to deal with this for my responsive website. I have many different backgrounds for the same elements to deal with different screen widths. My solution is very simple, keep all your images scoped to a css selector, like "zoinked".
The logic:
If user scrolls, then load in styles with background images associated with them. Done!
Here's what I wrote in a library I call "zoinked" I dunno why. It just happened ok?
(function(window, document, undefined) { var Z = function() {
this.hasScrolled = false;
if (window.addEventListener) {
window.addEventListener("scroll", this, false);
} else {
this.load();
} };
Z.prototype.handleEvent = function(e) {
if ($(window).scrollTop() > 2) {
this.hasScrolled = true;
window.removeEventListener("scroll", this);
this.load();
} };
Z.prototype.load = function() {
$(document.body).addClass("zoinked"); };
window.Zoink = Z;
})(window, document);
For the CSS I'll have all my styles like this:
.zoinked #graphic {background-image: url(large.jpg);}
@media(max-width: 480px) {.zoinked #graphic {background-image: url(small.jpg);}}
My technique with this is to load all the images after the top ones as soon as the user starts to scroll. If you wanted more control you could make the "zoinking" more intelligent.