Lëvizja e pafundme (lëvizje): të mirat dhe të këqijat. Lëvizja e pafundme e faqeve: ndihmon ose dëmton

11.08.2019 Windows 8

a! Ndarja e përmbajtjes në faqe me numra është një skemë klasike e faqeve, intuitive dhe e njohur për përdoruesit. Sidoqoftë, kohët e fundit gjithnjë e më shumë sajte kanë filluar të "vënë në praktikë" këtë lloj navigimi të faqeve, si p.sh. Infinite Scroll. Edhe gjigantë të tillë si Google, Facebook dhe VKontakte nuk ishin përjashtim. Natyrisht, ky lloj faqosjeje ka të mirat dhe të këqijat e veta, por kjo është një tjetër bisedë. Në këtë tutorial do të shikojmë se si të zbatojmë një navigim të tillë.

Si punon?!

Po, gjithçka është shumë e thjeshtë, nëse përdoruesi tashmë ka lëvizur nëpër një numër të caktuar postimesh dhe është në fund të faqes, atëherë më shumë mesazhe ngarkohen me një vonesë të vogël. Për ta bërë këtë, duke përdorur $.post ne formojmë një kërkesë POST në faqen për shkarkimin e të dhënave nga baza e të dhënave (skedari .php), struktura HTML e të dhënave formohet në të njëjtin skedar. Pas së cilës, duke strukturuar shënimin HTML, të dhënat kthehen në skript dhe vendosen në faqe.

Procesi i përcaktimit të pozicionit të përdoruesit në faqe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Nëse lëvizja është e aktivizuar
nëse ($settings.scroll == e vërtetë ) (
// .. dhe përdoruesi lëviz faqen
$(dritare).scroll(funksion() (

// Kontrolloni nëse përdoruesi është në fund të faqes
nëse ($(dritare).scrollTop() + $(dritare).height() > $this.height() && !i zënë) (

// Procesi në vazhdim
i zënë
$this.).html) ;

// Ekzekutoni një funksion për të marrë të dhëna me një vonesë të caktuar
// Kjo është e dobishme nëse keni përmbajtje në fund
setTimeout(funksioni () (

GetData();

) , $settings.delay ) ;

}
} ) ;
}

Ju ndoshta keni vënë re përdorimin e variablave, parametrave të shtojcave, si të thuash, më shumë rreth tyre pak më vonë. Funksioni i kërkesës AJAX për një skedar PHP getData() duket si ky:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Funksioni i kërkesës AJAX
funksioni getData() (

// Formimi i një kërkese POST për ajax.php
$.post("ajax.php" , (

Veprimi: "lëvizje"
numri: $settings.nop,
kompensim: kompensim,

), funksioni (të dhënat) ) .html ($initmessage) ;

// Nëse të dhënat e kthyera janë bosh atëherë raportojeni
nëse (të dhënat).html($settings.gabim);
}
tjeter(
// Kompensimi rritet
offset = offset+ $settings.nop ;

// Shtoni të dhënat e marra në përmbajtjen DIV
$this.find(".përmbajtje").append(të dhëna);

// Procesi i përfunduar
i zënë = i rremë;
}

} ) ;

Skedari AJAX.php

Skripti PHP për kërkimin e bazës së të dhënave dhe gjenerimin e strukturës së mesazheve dalëse mund të duket në çdo mënyrë të pranueshme për ju. E tëra çfarë ju duhet të bëni është të merrni disa informacione nga baza e të dhënave MySQL sipas zgjedhjes suaj. Më poshtë është një skedar shumë i thjeshtë ajax.php që merr informacion nga një bazë të dhënash MySQL dhe shfaq përmbajtjen me një titull dhe lidhje.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22