Forum PHP.pl > [jQuery] Table i preload obrazkow

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] Table i preload obrazkow

Forum PHP.pl > Forum > Po stronie przeglądarki

unnament

19.02.2013, 20:37:21

Witam,

Mam pociety obrazek, na ktorym zbudowana jest tabela.
Niektore z tych obrazkow maja efekty hover na Sobie.
I czesto jest tak, ze jak sie najedzie na obrazek z hover to strona dopiero wczytuje hover i przez chwile jest bialy prostokacik.
Probowalem dwiema metodami wczytac wczesniej te hover i nic z tego,
Prosze o pomoc

1 metoda:

w head:

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
    var pics=new Array("../images/normal_05.png","../images/pk_hover_05.png","../images/normal_08.png", "../images/pk_hover_06.png"); 
function preload_images() 
{ 
 var img=new Array; 
 for (var i=0;i<pics.length;i++) 
 { 
  img[i]=new Image(); 
  img[i].src=pics[i]; 
 }
}
});
	</script>
[HTML] pobierz, plaintext

pozniej:

[HTML] pobierz, plaintext 
<body onload="java script:preload_images();">
[HTML] pobierz, plaintext

2 metoda:
zrobilem divy z backgroundami obrazkow z hover na display:none i na poczatku strony wrzucilem divy

[HTML] pobierz, plaintext 
css:
div#grafika_napotem07 {
	background: url(../images/normal_05.png);
    display: none;
}
 
div#grafika_napotem08 {
	background: url(../images/pk_hover_05.png);
    display: none;
}
 
div#grafika_napotem09 {
	background: url(../images/normal_08.png);
    display: none;
}
 
div#grafika_napotem10 {
	background: url(../images/pk_hover_06.png);
    display: none;
}
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
<div id='grafika_na_potem07'> </div>
<div id='grafika_na_potem08'> </div>
<div id='grafika_na_potem09'> </div>
<div id='grafika_na_potem10'> </div>
[HTML] pobierz, plaintext

Giluś

22.02.2013, 21:48:48

U mnie dało efekt taki kod:

Od razu po body:

[HTML] pobierz, plaintext 
<div style="display: none"><img src="gfx/cyfry/1.png"/><img src="gfx/cyfry/4.png"/><img src="gfx/cyfry/7.png"/><img src="gfx/cyfry/2.png"/><img src="gfx/cyfry/5.png"/><img src="gfx/cyfry/8.png"/><img src="gfx/cyfry/0.png"/><img src="gfx/cyfry/3.png"/><img src="gfx/cyfry/6.png"/><img src="gfx/cyfry/9.png"/></div>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.