Carregar uma imagem de fundo de baixa resolução primeiro, depois uma de alta resolução

CSS:

#div_whatever {
   position: whatever;
   background-repeat: no-repeat;
   background-position: whatever whatever; 
   background-image: url(dir/image.jpg);
   /* image.jpg is a low-resolution at 30% quality. */
}

#img_highQuality {
    display: none;
}

HTML:

<img id="img_highQuality" src="dir/image.png">
<!-- img.png is a full-resolution image. -->

<div id="div_whatever"></div>

JQUERY:

$("#img_highQuality").off().on("load", function() {
    $("#div_whatever").css({
        "background-image" : "url(dir/image.png)"
    });
});
// Side note: I usually define CSS arrays because
// I inevitably want to go back and add another 
// property at some point.

O Que Acontece:

1. uma versão de baixa resolução do fundo carrega rapidamente.
Entretanto, a versão de resolução mais alta está a carregar como uma imagem escondida. Quando a imagem de alta resolução é carregada, o jQuery troca a imagem de baixa resolução do div com a versão de alta resolução.

PUROS JS Versão

CSS:

.hidden {
   display: none;
}

#div_whatever {
   position: whatever;
   background-repeat: no-repeat;
   background-position: whatever whatever; 
   background-image: url(dir/image.jpg);
   /* image.jpg is a low-resolution at 30% quality. */
}

HTML:

<div id="div_whatever"></div>
<img id="img_whatever" class="hidden" src="dir/image.png" onload="upgradeImage(this);">

JAVASCRIPT:

function upgradeImage(object) {
    var id = object.id;
    var target = "div_" + id.substring(4);

    document.getElementById(target).style.backgroundImage = "url(" + object.src + ")";
}

ACTUALIZAR / MELHORAR (1/31/2017)

Esta melhoria é inspirada pelo excelente pontoDe gdbj de que a minha solução resulta na especificação do caminho da imagem em três locais. Embora eu não tenha usado gdbj's addClass() técnica, o seguinte código jQuery é modificado para extrair o caminho da imagem (ao invés de ser conectado ao código jQuery). Mais importante, esta versão permite múltiplas substituições de imagens de baixa resolução para alta resolução.

CSS

.img_highres {
  display: none;
}

#div_whatever1 {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(PATH_TO_LOW_RES_PHOTO_1);
}

#div_whatever2 {
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(PATH_TO_LOW_RES_PHOTO_2);
}

HTML

<div id="div_whatever1"></div>
<img id="img_whatever1" class="img_highres" src="PATH_TO_HIGH_RES_PHOTO_1">

<div id="div_whatever2"></div>
<img id="img_whatever2" class="img_highres" src="PATH_TO_HIGH_RES_PHOTO_2">

JQUERY

  $(function() {
      $(".img_highres").off().on("load", function() {
         var id = $(this).attr("id");
         var highres = $(this).attr("src").toString();
         var target = "#div_" + id.substring(4);
         $(target).css("background-image", "url(" + highres + ")");
      });
   });

O Que Acontece:

1. as imagens de baixa resolução são carregadas para cada uma das divas com base no seu CSS. configuração da imagem de fundo. (Notar que o CSS também fixa o div para o dimensao.)
Entretanto, as fotos de alta resolução estão a ser carregado como imagens escondidas (todas a partilhar um nome de classe de img_ highres).
2. uma função jQuery é despoletada cada vez que uma foto img_highres completa o carregamento.
3. a função jQuery lê a localização da imagem src, e muda a imagem de fundo do div correspondente. Na exemplo acima, a Convenção de nomenclatura é "div_ [nome]" para as divs visíveis e " img_ [mesmo nome] " para as imagens de alta resolução carregadas na fundo.