Allora in risposta alle tue domande:

1. Quello che il precaching fa è caricare una determinata immagine nella memoria del client, quindi che poi la usi con <img> o background-image, non cambia dal suo punto di vista: il browser l'ha già in memoria e non deve riscaricarla.

2. mmm, questa è una bella domanda. Alura, io ho fatto un paio di test con FireFox e FireBugs e sembrerebbe scaricare le immagini anche se il tag img è in display: none; Purtroppo non so se vale lo stesso per IE, ma secondo me fanno così tutti

3. Allora, le immagini vengono caricate tramite l'oggetto Image di JS al momento in cui gli setti il src. dopo quell'istruzione viene lanciata una richiesta GET in asincrono alla pagina per ottenere l'immagine indicata dal path. Se invece fai l'injection di un tag img, senza usare Image, l'immagine viene caricata nel momento in cui il tag viene immesso nella pagina, ovvero quando fai appendChild sull'elemento padre.

Spero di aver risposto alle tue domande.