Precargar imagenes en galeria con jquery

Cuando un sitio web posee muchas imagenes en una sola pagina suele poner lento el navegador haciendo que las personas no quieran entrar en la pagina o el sitio.

Más que todo se ve en galerias de imagenes por eso facebook y otros sitios precargan las imagenes para que el sitio no ponga lento el navegador y tu podrás hacerlo con el siguiente tutorial de Tuts.

Ve a Plantilla, luego has click en Edicion de HTML.
Busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente.

/* CSS buffering images with FUTUdownloads by Tuts */
@charset "utf-8";
#gallery { list-style:none; }
#gallery li { background:#e8e8e8; float:left; display:block; margin:15px 56px;display:block; border:1px solid #d7d7d7;
-moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; padding:0; -webkit-box-shadow:1px 1px 6px #ddd; -moz-box-shadow:1px
1px 6px #ddd; box-shadow:1px 1px 6px #ddd; }
#gallery li p { border:1px solid #ffffff; padding:7px; -moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; margin:0;
}
#gallery li a { display:block; color:#fff; padding:0; text-decoration:none; }
#gallery img { width:400px;height:250px; }
.preloader { background:url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/Buffering-img/89.gif) center center no-repeat #ffffff; }

Lo que está negreado son las cosas que puedes editar.
Luego busca la etiqueta </head> y encima de ella pega los siguiente.

<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/Buffering-img/jquery.preloader.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/jquery-1.7.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$("#gallery").preloader();
});
</script>

Guarda los cambios
Ahora cuando vallas a crear una entrada o pagina donde pondrás una galeria de imagenes agregas lo siguiente en el HTML de la entrada o pagina.

     <ul id="gallery" class="clearfix">
        <li><p><a href="#"><img src="URL de la imagen" /></a></p></li>
        <li><p><a href="#"><img src="URL de la imagen" /></a></p></li>
        <li><p><a href="#"><img src="URL de la imagen" /></a></p></li>
        <li><p><a href="#"><img src="URL de la imagen" /></a></p></li>
        <li><p><a href="#"><img src="URL de la imagen" /></a></p></li>
        <li><p><a href="#"><img src="URL de la imagen" /></a></p></li>
    </ul>