1) Unless you need transparency, it's more efficient to use .jpg. I downloaded one of your png images and it was 132KB on my PC. After optimising for the web with 88% compression and removing some of the jpg header data in Photoshop, I saved the file and its size on my PC is now only 7.7KB. Other image editing software should also allow you to compress jpg's to whatever you like before image quality is affected.
I have attached the optimised file (without the transparency).
You can preload images using something like -
in the <head>
var myImage = new Image();
myImage.src = '/pathTo/somePic.jpg';
Then when an
<img id='imgID' src='' alt=''> needs a pic to be assigned to it, you can do -
and the image will appear straight away.
document.getElementById('imgID').src = myImage.src;