Når du blar gjennom Facebook-sider topp- og faste bunnseksjonen forbli synlig mellom siden lastes og URL i adresselinjen endres tilsvarende. Minst, det er en illusjon jeg får.
Hvordan Facebook oppnå det teknisk sett?
Hvordan Facebook holde topp- og bunntekst fast under lasting av en annen side?
stemmer
15
5 svar
stemmer 3
3
En måte å gi topp- og bunntekst som vises invariant er via CSS - her er et eksempel på en fast bunntekst (merke "posisjoner: fast,"):
#Footer {
font-size:xx-small;
text-align:left;
width:100%;
bottom:0px;
position:fixed;
left:0px;
background-color: #CCCCCC;
border-top: 1px solid #999999;
padding:4px;
padding-right:20px;
color:#666666;
}
Det er lurt å sørge for at du legger litt margin-bottom til side divs (de som fyller hoveddelen av siden) for å gi rom for den faste bunntekst (samme med en header hjelp Margin-Top).
Dette betyr ikke faktisk bo på siden, men fordi plasseringen er så tett og invariant, det vil se ut som om det gjør mindre siden lastes tar for lang tid. Jeg vet ikke om dette er hva FaceBook gjør, men det vil gi deg mye den samme effekten.
stemmer 0
0
Vel, den måten å oppnå noe slikt ville være gjennom AJAX, men så vidt jeg kan se, facebook faktisk ikke gjør dette ... Jeg bare sjekket, og det frisker overskriften som de fleste steder ...
Edit: Når jeg først besvart dette, var jeg ute på Facebook med Google Chrome (2.0), som uansett grunn, faktisk ikke gjøre det på denne måten -> når jeg klikker på Min profil fra hjemmesiden, det gir meg dette i adressefeltet: http://www.facebook.com/profile.php?id=1304250071&ref=profile
og oppdateres derfor hele siden ... Merkelig
stemmer 38
38
Henvis til Mark Brittingham svar for hvordan du kan style det, selv om jeg ikke tror det er det du spør her. Jeg vil gi deg de tekniske detaljene om hvordan det fungerer (og hvorfor det er ganske genialt).
Ta en titt på statuslinjen når du holder markøren over på Profil linken i overskriften ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Det er der det <a> tag peker til. Nå ser på adresselinjen når du klikker på det ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Legg merke til "#" fragment identifikator / hasj ? Dette beviser egentlig at du ikke har forlatt siden og den forrige forespørselen ble gjort med AJAX. De er avskjære klikk hendelser på disse linkene, og overstyrer standard funksjonalitet med noe av sine egne.
For å gjøre dette skje med Javascript, alt du trenger å gjøre tildele et klikk hendelseshåndterer til disse koblingene som så ...
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for(var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function() {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}
}
En utmerket fordel for denne tilnærmingen er at den tillater tilbakeknappen for å være funksjonelle (med litt tilsatt list), som tradisjonelt har vært en smertefull bivirkning av kronisk Ajax bruk. Jeg er ikke 100% sikker på hva dette lureri er, men jeg vedder på at det er en eller annen måte i stand til å oppdage når nettleseren modifiserer fragment identifikator (muligens ved å sjekke den hver ~ 500 millisekunder).
Som en side note, endre hash til en verdi som ikke kan finnes i den DOM (via element-ID) vil rulle på siden hele veien til toppen. For å se hva jeg snakker om: du blar ned ca 10 piksler fra toppen av Facebook, utsette halvparten av toppmenyen. Klikk på ett av elementene, vil den hoppe opp igjen til toppen av siden så snart fragment identifikator blir oppdatert (uten noe vindu repaint / tegne forsinkelse).
stemmer 0
0
Med CSS absolutt / fast posisjonering, kan de div koder som inneholder topp- og bunntekst være hvor som helst i HTML. Som på toppen!
På de fleste aktuelle nettlesere er det en gjengi forsinkelse, en fjerdedel andre for Firefox tror jeg, slik at siden ikke vises delvis gjengitte innholdet i raske blink og kaste bort en masse tid tegning som nettverksdata kommer inn.
Så hva kan skje er at den nye siden returnerer raskt HTML inneholder stiler og topp- og bunntekst. Dette innholdet kan gjengis umiddelbart av nettleseren, så når det viser neste side, det ser ut som om de ikke endret.
Hvis siden genererer dynamisk innhold, er et godt triks å legge all statisk informasjon på toppen, utgang som og skyll data buffer. Så gjør den dynamiske databasespørringer og slikt.
stemmer 0
0
Å øke Josh Stodola er svaret: I min forståelse av YUI Bokmerkebehandling gjør akkurat denne jobben.