Faqja po ngarkohet ndërsa lëvizni. Më rrotullo gjatë gjithë rrugës

Pershendetje te gjitheve. Sot dua t'ju flas se si të organizoni ngarkimin dembel të përmbajtjes në faqet e uljes.

Shpesh quhet edhe " rrotull i pafund". Me siguri keni parë një efekt të ngjashëm kur përmbajtja nuk është fillimisht e pranishme në faqe dhe ndërsa faqja lëviz, ajo ngarkohet pa probleme.

Shumë kohë më parë, ata i shkruan seksionit "Sugjerimet tuaja" me një kërkesë për të shkruar një artikull se si të zbatohet një efekt i tillë:

Kështu që vendosa të filloj zbatimin. Faleminderit për sjelljen e ideve. Le të fillojmë...

Si në shumicën e rasteve, ne fillojmë duke përfshirë bibliotekën jQuery:

Dhe tani ju duhet të devijoni pak dhe unë do t'ju shpjegoj thelbin e metodës. E gjithë kjo është nisur për të mos ngarkuar të gjithë elementët e faqes (portofoli ose rishikimet tuaja), por për t'i ngarkuar ato sipas nevojës. Për shembull, kur përdoruesi klikon në butonin "Trego më shumë". Kështu, faqja do të ngarkohet shumë më shpejt. Dhe tani thelbi, me ndihmën teknologjia ajax ne do të ngarkojmë elementi i dëshiruar(div) dhe skedari i palës së tretë në faqen tonë të uljes. Gjithçka është kaq e thjeshtë, si në teori ashtu edhe në praktikë, dhe së shpejti do ta shihni këtë.

Tani le të krijojmë bllokun kryesor, për shembull, me fotografi të punës sonë. Supozoni se vizatojmë ikona dhe do t'i ngarkojmë kur të klikohet butoni. Kam krijuar një strukturë si kjo:

Portofoli Shfaq më shumë...

Siç mund ta shihni, gjithçka është e thjeshtë. Por çfarë duhet t'i kushtoni vëmendje? Dhe duhet t'i kushtoni vëmendje div-së me id="smartPortfolio", id="moreButton" dhe id="loadingDiv", pasi ato përdoren në skript, gjë që na ndihmon të ngarkojmë përmbajtje nga faqet e tjera. SmartPortfolio është një "kontejner" për portofolin tonë. MoreButton - ky do të jetë butoni ynë, kur të klikohet, ngarkohet një pjesë tjetër e portofolit. LoadingDiv - zona në të cilën do të shfaqet teksti kur portofoli të hapet plotësisht, ose ndodh një lloj gabimi.

Për shembull, disa nga lexuesit do të përpiqen ende ta testojnë këtë skript jo në server, por thjesht hapin skedarin e indeksit në shfletues. Në këtë rast, ata do të shohin një mesazh gabimi. Përveç kësaj, me një lidhje shumë të ngadaltë, mund të duhet kohë për të shkarkuar skedarët, dhe në mënyrë që përdoruesi të kuptojë se procesi është në proces, mund të futni një mesazh atje që ngarkimi në vazhdim të dhëna ose vend (foto, tregues progresi ose diçka tjetër).

Skriptin nuk e kam shkruar vetë, por e kam gjetur në një nga faqet, autori është i shënuar në kodin burimor, për ata që janë të interesuar, hidhini një sy. Meqenëse ai nuk është gjithashtu madhësia e madhe, atëherë do t'i jap të gjitha, por nëse planifikoni të përdorni të njëjtat emra ID dhe shtigje skedarësh si të miat, atëherë nuk keni pse ta shikoni atë, por thjesht lidheni atë përpara mbylljes etiketë e trupit(në fund).

Për ata që planifikojnë të bëjnë ndryshime, këtu është vetë skenari:

var lazyload = përtac || (); (funksion($, lazyload) ( "përdor strikte"; var faqe = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", kontejner = "#smartPortfolio"; lazyload.load = funksion() ( var url = "./pages/" + faqe + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, sukses: funksion(përgjigje) (nëse ( !response || answer.trim() == "ASNJË") ( $(buttonId).fadeOut(); $(loadingId).text("Portofoli është ngarkuar plotësisht"); kthe; ) appendContests(përgjigje); ), gabim : funksion(përgjigje) ( $(loadingId).text ("Na vjen keq, ka ndodhur një gabim gjatë kërkesës. Rifresko faqen."); ) )); ); var appendContests = funksion(përgjigje) ( var id = $( buttonId);$(buttonId).show();$(loadingId).hide();$(response).appendTo($(container));faqe += 1;);)))(jQuery, lazyload) ;

Pra, tani ia vlen të flasim për ato skedarë nga të cilët do të ngarkojmë informacionin. Skripti supozon se këto do të jenë skedarë me emra 2.html…5.html, etj. e cila përmban informacionin tonë. Për shembull, skedari im 2.html ngarkohet së pari dhe ka përmbajtjen e mëposhtme:

Në strukturën e faqes sime, faqet nga të cilat do të merren informacionet për ngarkimin e mëvonshëm kur klikohen, gjenden në dosjen e faqeve. Janë tre skedarë, dy prej të cilëve janë plot dhe i fundit është bosh. Ai merr logjikën e skenarit.

Rruga në skript specifikohet si më poshtë:

Var url = "./pages/" + faqe + ".html";

Nëse planifikoni të përdorni një rrugë tjetër, sigurohuni që ta zëvendësoni atë në skenar. Përveç kësaj, nëse keni përdorur ID të tjera, atëherë ato do të duhet të ripërcaktohen në skenar. Mu ketu:

ButtonId = "#moreButton", loadingId = "#loadingDiv", kontejner = "#smartPortfolio";

Dhe, siç thashë, përpara etiketës së mbylljes së trupit, ne përfshijmë vetë skenarin:

Si kjo në faqe e uljes Ju mund të zbatoni ngarkimin dembel. Dërgoni më shumë tema për të cilat dëshironi të lexoni një artikull në blog. Për aq sa është e mundur, do të përpiqem të publikoj jo materialin e planifikuar, por atë për të cilin ju pyesni në seksionin "Sugjerimet tuaja". Dhe për sot, kjo është e gjitha. Mirupafshim!

Sandbox

rekrutoj 9 shkurt 2013 në 21:42 Më ftoh plotësisht. Struktura e përgjegjshme me rrotullim të pafund

• dhomë druri *

Jo shumë kohë më parë hasa në një problem:
- Paraqitja e përgjegjshme e paraqitjes. Kur madhësia e dritares ndryshohet, elementët në faqe shkallëzohen në një gjerësi të caktuar. Nëse gjerësia është më e vogël se minimumi, numri i elementeve në rresht bëhet më i vogël, duke mbushur të gjithë ekranin në gjerësi. Kuptimi është i qartë - faqja duhet të duket në çdo monitor, përfshirë. në pajisjet mobile.
- Përmbajtja ngarkohet kur faqja lëviz, kështu që shfaqet vetëm një pjesë e përmbajtjes, pjesa tjetër ngarkohet ndërsa lëvizni poshtë (analog i murit VK).
- Shfaqja e elementeve në faqe ndodh nga ana tjetër, një rritje e qetë e transparencës së secilit element. Pasi elementi i parë të jetë bërë i errët, efekti aplikohet në elementi tjetër... dhe kështu me radhë për të gjithë.

Nuk gjeta një zgjidhje të gatshme, më duhej të shkruaja gjithçka nga e para. Ndoshta e gjithë kjo veçori është e padobishme, por nëse befas i vjen në ndihmë dikujt, ne e përdorim atë, e testojmë, e shijojmë:

HTML. Për testim, bëra një plan urbanistik shumë të thjeshtë në një mënyrë të shpejtë. Për të mos u shqetësuar me stilet për një kohë të gjatë, lidha bootstrap. Këtu është shënimi:
Përshendetje Botë! // Në parim, klasa mund të inicializohet jo këtu, dhe pa parametra. Më shumë për këtë më vonë. // enë ku shfaqen të gjithë elementët. // Në rastin tonë, çdo artikull - element i veçantë Në faqe. Ne do të heqim shumë prej tyre. // ... shumë e shumë sende // Pastroni, sepse artikulli ynë noton: majtas

css. Gjithçka këtu është thjesht e egër. Lidha bootstrap, vendosa disa stile për përmbajtjen - dhe shko!
@import url ("bootstrap.css"); trupi ( sfondi: #000; ) seksioni. kontejneri ( pozicioni: absolute; lart: 50 px; fundi: 50 px; gjerësia: 100%; tejmbushja: automatik;) seksioni. kontejneri > seksioni.artikull ( pozicioni: relative; notimi: majtas; diferenca: 0; mbushja: 0; lartësia: 140 px; tejmbushja: e fshehur;) seksioni. kontejneri > seksioni.artiku > img(gjerësia: 100%;)

js. Këtu është tashmë interesante. Fillimisht, i shkrova funksionet veç e veç, më pas, kur gjithçka funksionoi, i kombinova në një klasë
GALERIA = ( // vendos parametrat e paracaktuar që mund të anulohen gjatë inicializimit. kontejneri: "section.container", // artikulli i kontejnerit prind: "section.item", // elementi individual i galerisë img: "section.item > img. hidden ", // imazhi që fillimisht do të "fshehim" intervali: 200, // vonohet numërimi i efektit të transparencës: 5, // numri i elementeve të shtuar në fillim: funksioni(paramet) ( var _self = kjo; // Ripërcaktimi i parametrave ( nëse jo, përdorni standardin e paracaktuar.) if(params != i padefinuar)( për (kyç var në parametra) ( _self = params; ) ) return _self.setUp(); ), setUp: funksion() ( var _self = this ; // Vari mbajtësit e ngjarjeve. Në rastin tonë, dritares (ridimensioni) i duhen $(window).bind("ridimensioni", funksion()( _self.adjust(); )); // ... për të ngarkuar faqe $(document).ready(function()( _self.adjust(); _self.play(); )); // ... për të lëvizur në bllokun prind $(_self.container).bind("scroll" , funksioni ()( _self.checkScroll(); )); ), // rregulloni gjerësinë dhe numrin e artikujve në rresht në varësi të madhësisë së dritares rregulloni: funksionin() ( var _self = kjo; var outWidth = $(_self.container).width(); var outHeight = $ (_self.container) .height(); var minGjerësia = 220; var cnt = Math.floor(outWidth / minWidth); var itemWidth = outWidth / cnt; $(_self.item).css(( "width" : itemWidth + "px" )) ;), // Filloni efektin e shfaqjes graduale të elementeve. Një nuancë e vogël: Klasa e fshehur // për imazhin nuk nevojitet për ta fshehur atë (kjo do të bëhet me metodën e mëposhtme), por për të gjetur // elementin e parë sa herë që përditësohet përmbajtja. Cikli metoda e lojës() përsërit // nëpër të gjitha imazhet me një klasë të fshehur (të gjitha kanë një si parazgjedhje), pas aplikimit të efektit // fadeIn(), duke hequr klasën. Kështu, kur ngarkoni përmbajtje të re, cikli fillon // jo nga elementi i parë, por nga i pari i ngarkuar. // U ndesh për herë të parë duke përdorur metodën queue(). luaj: funksion() ( var _self = kjo; artikuj var = $(_self.container).find(_self.img); $(artikuj).each(funksion(i) ( var cur = $(this).hide( $(dokument).radhë ("myCueue", funksion(n) (cur.removeClass("fshehur").fadeIn(_self.interval, n); )); )); $(dokument).dequeue(" myQueue"); ), // Përmbajtja po ngarkohet vetë. Gjithçka është e thjeshtë këtu: ne dërgojmë një kërkesë në server - marrim // përmbajtje të re në faqe (nëse ka) dhe e shfaqim atë në fund të ngarkesës së bllokut prind: funksion() ( var _self = kjo; $. ajax (( url: "/load .php", lloji: "POST", të dhënat: ("count": _self.count), tipi i të dhënave: "json", suksesi: funksioni (json) ( if(json.output) ( $(_self.container).fëmijë ("div.clearfix").before(json.output); _self.adjust(); _self.play(); ) ))); ), // Kontrollo gjendjen e lëvizjes. Nëse rrotull vertikale në bllokun prind // është e barabartë me maksimumin e mundshëm - ne dërgojmë një kërkesë për përmbajtje të re. // Kështu, ngarkimi i përmbajtjes do të kryhet vetëm nëse e kemi // rrëshqitur faqen deri në fund. checkScroll: funksion() ( var _self = kjo; var scrollH = $(_self.container).prop("scrollHeight"); var scrollT = $(_self.container).prop("scrollTop"); var scrollS = $( _self.container).prop("scrollTop") + $(_self.container).height(); if(scrollS == scrollH) ( _self.load(); ) ) )

PHP. Gjithçka është primitive këtu, vetëm për testim.
$json = grup(); $html = ""; $items_on_page = !empty($_POST["count"])? (int)$_POST["count"]: 5; për ($i = 0; $i< $items_on_page; $i++) { $html .= ""; ) $json["output"] = $html; echo json_encode($json);
Këtu, vetëm një parametër i kalohet $_POST (numri i blloqeve që do të shtohen), por gjithashtu mund të kaloni një pikë fillimi, sipas parimit të faqesimit. Mund të merret në JS me:
var artikuj = $(_self.container).find(_self.img); var start = artikujt.gjatësia; // dhe kaloni në kërkesën: data: ("count": _self.count, "start": start), // ... pas së cilës, kur merrni të dhëna, specifikoni..." LIMIT " . (int)$_POST["fillimi"] . "," . $artikujt_në_faqe;

Kështu doli "faqëzimi pa faqe", por në një faqe gome. Shembulli i punës këtu.

Në vitin 2011, ishte shumë në modë (për mendimin tim, kjo modë erdhi nga Facebook) për të bërë "lëvizje të pafund" në faqet e tyre: kjo është kur përdoruesi rrotullon dhe rrotullon timonin e miut dhe të gjitha rezultatet e reja të kërkimit ngarkohen nga Ajax në në fund të faqes, duke e kthyer lëvizjen normale në të pafundme dhe duke shkaktuar “disonancë konjitive” tek përdoruesi që e ka hasur për herë të parë.

Kohët e fundit pashë gjithashtu një artikull në këtë faqe në të cilin autori shprehte pakënaqësinë e tij për "lëvizjen e pafund" dhe bëri thirrje për përdorimin e "faqesimit" të mirë të vjetër.

Jam dakord me autorin. Unë vetë jam një narkoman dhe ndonjëherë ulem në monitor si i magjepsur, me sy të qelqtë, rrotulloj rrotën magjike, nuk mund të shkoj në punë / në punë / në dyqan / të ha / pi / te tualetin, dhe e kthej me një mendim të vetëm: "Epo, kur do të mbaroni të gjithë?!" (Çfarë mund të bësh - jam mësuar t'i çoj gjërat deri në fund).

Një mëngjes u ngrita dhe vendosa me vendosmëri: "Mjaft me këtë!".

Ju prezantoj skenarin tim të vogël, të cilin e kam shkruar së fundmi për " rrjet social(me blackjack dhe hookers).

Për të parë një demonstrim, shkarkoni arkivin dhe ekzekutoni skedarin "test/test.html".

Çfarë risi ofron ky skenar:

Duke qenë se e kthyen "scrollbar"-in kryesor në diçka në mënyrë të pakuptueshme, duhet të kthejmë "scrollbar"-in normal, gjë që e bëmë duke vizatuar një shirit gri në anën e djathtë të faqes, menjëherë në të majtë të "scrollbar" normal.

Sa larg ka arritur ky shirit nga lart është sa rezultate të mostrës kemi kaluar tashmë. Në përgjithësi, ky shirit është si i zi. Ku është gri është vendi në të gjithë kampionin ku jemi tani.

Vini re gjithashtu se adresa e faqes ndryshon ndërsa lëvizni. Kështu, sonte mund të lëvizni në gjysmë, të shënoni faqen, të fikni kompjuterin, të flini, të zgjoheni në mëngjes, të ndizni kompjuterin, të shkoni te faqja që keni shënuar dje para se të shkoni në shtrat dhe të vazhdoni të lëvizni nga vendi ku ndaluat. Dhe, për më tepër, ju mund të lëvizni nga ky vend jo vetëm përpara, por edhe prapa.

Dhe në lidhje me navigimin në ndonjë faqen e dëshiruar: mund të shkoni në çdo faqe edhe këtu - thjesht zëvendësoni numrin e faqes së përzgjedhjes që ju nevojitet në adresën e faqes së internetit. Meqenëse URL-të e lexueshme nga njeriu janë tani standardi, kjo duhet të jetë një zgjidhje e mirë.

Ky skenar, padyshim, nuk është diçka e gdhendur në granit, dhe unë vetë, duke u ngritur sot në mëngjes, rishkrova gjysmën e tij. Sidoqoftë, performanca duket të jetë e qëndrueshme dhe e testuar në të fundit Versionet e Chrome dhe Firefox. Unë do të them menjëherë: Unë nuk jam duke ndjekur "përputhshmërinë e ndër-shfletuesve" - ​​gjithmonë mund të përfundojë nëse dikush dëshiron ta përdorë këtë skript në faqen e tij të "ndër-shfletuesit".

Duket se gjithçka, demonstrimi flet vetë. Postimi ngjall komente.

Çfarë tjetër mund të bëhet (bazuar në komentet):

Kur klikoni kudo në shirit - shkoni në faqen përkatëse të përzgjedhjes.

Hiqni faqet e të dhënave nga pjesa e sipërme e faqes së internetit kur ka shumë të dhëna në faqen e internetit (në mënyrë që të mos ngadalësohet).

Shembuj të "lëvizjes së pafund" të përmirësuar.

Ka kohë që nuk kam postuar ndonjë kod. Sot do të korrigjoj situatën dhe do të jap disa fragmente të dobishme jQuery që do t'ju duhen patjetër në faqet tuaja.

Nuk do të hyj në teori, i gjithë dokumentacioni i jQuery është në faqen zyrtare të bibliotekës. Unë thjesht do t'ju kujtoj se çfarë është jQuery.

jQuery është një bibliotekë JavaScript që fokusohet në ndërveprimin midis JavaScript dhe HTML. Biblioteka jQuery e bën të lehtë aksesin në çdo element DOM, aksesin në atributet dhe përmbajtjen e elementeve DOM dhe manipulimin e tyre. Biblioteka jQuery ofron gjithashtu një API të përshtatshme për të punuar me AJAX.

Pra, le të shkojmë!

1. Lëvizje e qetë kthehu në krye të faqes

Asnjë faqe interneti nuk është e plotë pa të. Vetëm 4 rreshta kodi do t'i lejojnë vizitorët tuaj të lëvizin pa probleme të gjithë faqen lart me një klik.

$("a").click(function() ($("html, body").animate(( scrollTop: 0 ), "i ngadalte"); return false; ));

2. Dubliko kokat e tabelave

Për të përmirësuar perceptimin dhe lexueshmërinë e tabelave tuaja, mund të kopjoni titujt e tyre poshtë tabelës. Do të duket një gjë e vogël, por është shumë e përshtatshme në tavolina komplekse dhe të mëdha që nuk përshtaten në një ekran.

$tfoot = $(""); $($("thead").klon(e vërtetë, e vërtetë).fëmijët().get().reverse()).secili(funksion()( $tfoot.append($(this)); )); $tfoot.insertAfter("tabela e tabelës");

3. Ngarkimi i të dhënave të jashtme

ME jQueryËshtë shumë e lehtë të ngarkosh përmbajtje të jashtme në faqet e internetit. Mund të shfaqet drejtpërdrejt në një bllok DIV, si në shembullin më poshtë.

$("#content").load("somefile.html", funksion(përgjigje, status, xhr) ( // trajtimin e gabimit if(status == "gabim") ( $("#content").html(" Ndodhi një gabim: " + xhr.status + " " + xhr.statusText); ) ));

4. të njëjtën lartësi folësit

Dihet se për të lidhur blloqet në lartësi me standardin HTML dhe CSS nuk është aq e lehtë. Vetëm disa rreshta kodi më poshtë do t'ju lejojnë të bëni lartësinë e të gjithë blloqeve të barabartë me lartësinë e bllokut më të madh.

varmaxheight = 0; $("div.col").each(funksion()( if($(this).height() > maxheight) ( maxheight = $(this).lartësi(); ) )); $("div.col").lartësia(maxheight); 5. Zebra tabelare

Siç e dini, perceptimi dhe lexueshmëria e tabelës do të jetë dukshëm më e lartë nëse bëni alternim të rreshtave me shumë ngjyra. Kjo është shumë e lehtë për t'u zbatuar me jQuery.

$(dokument).ready(funksion()( $("tabela tr:edhe").addClass("shirit"); ));

6. Rifreskim i pjesshëm i faqes

Me jQuery është shumë e lehtë të zbatosh një rifreskim të faqeve në bllok (të pjesshëm). Për shembull, kodi më poshtë do t'ju lejojë të përditësoni automatikisht bllokun #refresh çdo 10 sekonda.

SetInterval(funksioni() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // milisekonda për të pritur

7. Parangarkimi i imazhit

Ky kod ju lejon të ngarkoni imazhe në sfond pa u ngarkuar gjatë shfletimit të faqes. Thjesht renditni në rreshtin 7 imazhet që duhet të ngarkoni paraprakisht.

$.preloadImages = funksion() ( për (var i = 0; i maxWidth) (raporti = maxGjerësia / gjerësia; $(this).css("gjerësia", maxWidth); $(this).css("lartësia", lartësia * raporti); lartësia = lartësia * raporti; ) gjerësia var = $ (kjo). gjerësia (); lartësia var = $ (kjo). lartësi (); nëse (lartësia > maxlartësia) (raporti = max Lartësia / lartësia; $ (this).css("lartësia", maxHeight);$(kjo).css("gjerësia", gjerësia *raporti);gjerësia = raporti gjerësi *; ) )); //$("#contentpage img").shfaq(); // NDRYSHO IMAGE ));

12. Ngarkimi i përmbajtjes kur lëvizni faqen poshtë

Kjo teknikë shpesh quhet lëvizje e pafundme. Përmbajtja ngarkohet ndërsa përdoruesi lëviz faqen. Kjo është mjaft e lehtë për t'u zbatuar me kodin më poshtë.

var loading = false; $(dritare).lëvizje(funksion()( if((($(dritare).scrollTop()+$(dritare).lartësi())+250)>=$(dokument).lartësi())( if( loading == false)( ngarkim = e vërtetë; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max"). val(), funksioni(i ngarkuar)( $("trupi").append(i ngarkuar); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("ekrani","asnjë"); ngarkim = false; )); ) ) )); $(dokument).ready(funksion() ($("#loaded_max").val(50); ));

13. Verifikoni ngarkimin e imazhit

Shpesh ndodh që ju duhet të kontrolloni imazhin e ngarkuar ky moment ose jo. Dhe jQuery do të na ndihmojë me këtë përsëri.

Var imgsrc = "img/image1.png"; $(" ").load(funksioni () ( alarm ("imazhi u ngarkua"); )).error(funksioni () ( alarm("gabim në ngarkimin e imazhit"); )).attr("src", imgsrc);

14. Rendit sipas alfabetit

Nëse keni nevojë për renditje dinamike alfabetike të një liste, ky fragment i vogël patjetër do t'ju ndihmojë.

$(function() ( $.fn.sortList = funksion() ( var mylist = $(kjo); var listitems = $("li", mylist).get(); listitems.sort(funksion(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

Ruaj - e dobishme.

Të gjitha më të fundit dhe më interesantet nga bota e WordPress në kanalin tim Telegram. Abonohu!