Existem algumas formas de realizar o preload de imagens no navegador. É possível utilizar apenas CSS - mas deixa um pouco de "sujeira" no seu código, pois precisamos colocar algumas tags para se realizar o carregamento.
<div id="preload1"></div>
<div id="preload2"></div>
...
#preload1{
background:url('http://lorempixel.com/1366/590/fashion/2') no-repeat -9999px -9999px;
}
#preload2{
background:url('http://lorempixel.com/1366/590/fashion/3') no-repeat -9999px -9999px;
}
...
Também é possível utilizar JavaScript:
imagem1 = new Image();
imagem1.src = "http://lorempixel.com/1366/590/fashion/2";
imagem2 = new Image();
imagem2.src = "http://lorempixel.com/1366/590/fashion/2";
JavaScript pode deixar as coisas mais sofisticadas. Vamos utilizar uma array:
preload = [
"http://lorempixel.com/1366/590/fashion/2",
"http://lorempixel.com/1366/590/fashion/3",
"http://lorempixel.com/1366/590/fashion/4"
];
imagens = [];
for(i in preload){
imagens[i] = new Image();
imagens[i].src = preload[i]; //carrega a imagem corresponte ao número
}