jquery hover i ładowanie obrazków Opcje

[tomtheman]

Witam

Mam taki problem:
Mam listę nieuporządkowaną w html taką jak poniżej.

[HTML] pobierz, plaintext 
<ul class="lista">
        <li class="pierwszy"><a href="#">Pierwszy link</a></li>
        <li class="drugi"><a href="#">Drugi link</a></li>
        <li class="trzeci"><a href="#">trzeci link</a></li>
</ul>
[HTML] pobierz, plaintext 

W jquery napisałem kod, który ładuje obrazek (o nazwie "nazwa_klasy.svg") jako tło do każdego wiersza listy a potem poprzez najechanie myszką przełącza na drugi obrazek ("nazwa_klasy-hover.svg") czyli ten sam obrazek (ikonę) z innym kolorem wypełnienia.
Problem polega na tym, że przy każdym najechaniu myszką i każdym zjechaniu ładowany jest od nowa obrazek co po pierwsze nie wygląda dobrze bo pomiędzy jednym a drugim załadowaniem obrazka jest białe mignięcie a po drugie zżera niepotrzebnie transfer.

[JAVASCRIPT] pobierz, plaintext 
$(function(){
    $(".lista li").each(function() {
        var $this = $(this);
           $this.css({
                'background-image': 'url(icons/' + $this.attr('class') + '.svg)',
                     });
        });
 
    $(".lista li").hover(function() { 
            var $this = $(this);
                $this.css('background-image', 'url(icons/' + $this.attr('class') + '-hover.svg)');
    },
        function() {
            var $this = $(this);
                $this.css('background-image', 'url(icons/' + $this.attr('class') + '.svg)');
    });     
 
});
[JAVASCRIPT] pobierz, plaintext 

No i mam odpowiednie ostylowanie w css.

Najlepszym rozwiązaniem byłoby użycie w css'ie :hover {fill:red;} ale niestety nie działa to do obrazków svg ładowanych zewnętrznie (działa tylko wtedy gdy svg jest dodawane jako wewnętrzny kod do pliku html).

Ma ktoś pomysł dlaczego raz załadowany obrazek nie zostaje zapamiętany tylko jest od nowa ładowany przy każdej akcji?

ps. dla obrazków innych niż .svg (np. png) problem też występuje.

Pozdrawiam