jquery hover i ładowanie obrazów

0

Witam

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

 
<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>

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.

$(function(){
	$(".lista li").each(function() {
        var $this = $(this);
       	$this.css({
		        'background-image': 'url(icons/' + $this.attr('class') + '.svg)',
			'background-position': '50% 0',
			'background-repeat': 'no-repeat',
			'background-size': '96px'
                     });
        });

	$(".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)');
	}); 	

});

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

0

One nie są ładowane ponownie (tj. nie występuje tam żądanie http), po prostu z cache są ładowane z opóźnieniem, ponieważ jak wyrzucasz całkiem z całej strony daną nazwę, to przeglądarka całkiem zapomina plik (to może się różnić w zależności od przeglądarki).
Jakbyś zrobił to po ludzku w css to by nie było tego problemu.

.lista li {
   background-position: 50% 0;
   background-repeat: no-repeat;
   background-size: 96px;
   background-image: url('icons/' attr(class) '.svg');
}
.lista li:hover {
  background-image: url('icons/' attr(class) '-hover.svg');
}
0

Właśnie o to chodzi, że nie chcę tego robić "po ludzku" w css bo mam wiele różnych obrazków na stronie, które będę ładował tą metodą i w css musiałbym dla każdego obrazka zrobić osobne ustawienie "na sztywno" dla dwóch różnych stanów, co zwiększy mi kod o kilkaset linijek.

Doszedłem już do tego jak to zrobić.

Utworzyłem dodatkowe dwa span'y nałożone na siebie. W jquery na starcie ładuję background dla pierwszego span'a a po najechaniu dodaję drugi a na pierwszy wrzucam display:none;
Po zjechaniu zamieniam display. Wtedy obrazki są ładowane tylko raz, przy czym obrazek -hover dopiero po najechaniu myszą.

Temat można zamknąć.

1 użytkowników online, w tym zalogowanych: 0, gości: 1