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

[kafowi]

Czytając ten temat na myśl przyszło mi tylko jedno hasło: sprite css.

[d4ng]

Tak jak mój przedmówca polecam Ci sprite ponieważ twoje obecne rozwiązanie generuje więcej zapytań co przy większych projektach ma spore znaczenie.
Ps. Pamiętaj że zawartość SVG też można wrzucić bądź edytować stąd nie widzę potrzeby odwoływania się do innego SVG który ma inną wartość np. fill="FF0000"

[smiady]

Tutaj masz znaną stronę do generowania spritów:
http://www.pl.spritegen.website-performance.org/