Już wyjaśniam:
Mam diva #rameczka, w nim jest div #tresc (strona czysty html). Mam też skrypt działający tak, że przy kliknięciu w link o konkretnej klasie (a.link lub a.menulink) następuje efekt fadeOut dla #rameczka, po czym strona zostaje przeładowana i #rameczka wraz z zawartością #treść robi fadeIn. Całość kodu wygląda tak:
Kod: Zaznacz cały
$(document).ready(function(){ // $(document).ready shorthand
$('#rameczka').hide().fadeIn(400);
$("a.link,a.menulink").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#rameczka").fadeOut(200, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
<!-- Przeładowanie jednego DIVa -->
$(document).ready(function(){
$('#menu a').click(function(){
var href = $(this).attr('href');
$('#rameczka').fadeOut(200,complete).load(href);
return false;
});
});
Da się jakoś temu zaradzić?
Docelowo efekt ma być taki, jakby całość strony była ciągła, a tylko ten jeden div #rameczka razem z divem #tresc (zawartym w nim) się przeładowywał. Niestety, przeładowanie strony z większym obciążeniem sieci potrafi zepsuć tą iluzję...
Niby da się to osiągnąć iframe'm i to nieinwazyjnie, modyfikując tylko linki i wczytywaną treść, ale to przestarzałe i nie chcę tego ryzykować.
Jeśli trzeba, to jest fragment kodu html który ma spełniać kryteria zawarte w kodzie:
Kod: Zaznacz cały
<div class="kontener" id="menu" style="text-align: center;">
<br />
<big><font size="6"><b><font color="white">Menu</font></b></font></big>
<hr width="120px" align="LEFT"/>
<span><a href="index.html" class="link"><b>Strona Główna</b></a></span>
<hr width="120px" align="LEFT"/>
<span><a href="blabla.html" class="link">Oferta</a></span>
<hr width="120px" align="LEFT"/>
<span>O mnie</span>
<hr width="120px" align="LEFT"/>
<span>Kontakt</span>
<br /><br />
</div><!-- koniec diva menu -->
<div id="rameczka">
<div id="tresc">
<!-- treść tutaj -->
<!-- -------------------------------------------------------------------------------------------------------------------------------------------- -->
Przykładowa treść
<br />
<p>przykładowy akapit do stylizacji</p>
<span>span - rozszerzenie</span>
<h1>Nagłówek 1</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h4>Nagłówek 4</h4>
<h5>Nagłówek 5</h5>
<h6>Nagłówek 6</h6>
<!-- --------------------------------------------------------------------------------------------------------------------------------------------- -->
</div></div>
EDT: jednak w momencie, gdy korzystam z szybkiego łącza internetowego, strona przeładowując się błyskawicznie nie "miga" na biało - efekt jest płynny i idealny w tym momencie. Dopiero przy wolniejszym łączu lub dłuższym oczekiwaniu na odpowiedź serwera pojawia się 0,5 sekundowe mignięcie białej strony - co wygląda brzydko, bo psuje efekt ciągłości i iluzję przeładowania tylko treści diva.