Pagina se încarcă pe măsură ce derulați. Învârte-mă până la capăt

19.04.2019 Programe

După cum puteți vedea, totul este simplu. Dar la ce ar trebui să fii atent? Și trebuie să acordați atenție div-ului cu id="smartPortfolio", id="moreButton" și id="loadingDiv", deoarece acestea sunt folosite în script, ceea ce ne ajută să încărcăm conținut din alte pagini. SmartPortfolio este un „container” pentru portofoliul nostru. MoreButton - acesta va fi butonul nostru, când faceți clic pe, se încarcă o altă parte a portofoliului. LoadingDiv - zona în care va fi afișat textul când portofoliul este deschis complet sau apare un fel de eroare.

De exemplu, unii dintre cititori vor încerca în continuare să testeze acest script nu pe server, ci pur și simplu deschide fișierul index în browser. În acest caz, ei vor vedea un mesaj de eroare. În plus, cu o conexiune foarte lentă, poate dura timp pentru a descărca fișiere și, pentru ca utilizatorul să înțeleagă că procesul este în desfășurare, puteți introduce un mesaj acolo care încărcare în curs date sau loc (imagine, indicator de progres sau altceva).

Nu eu am scris scenariul, dar l-am găsit pe unul dintre site-uri, autorul este listat în codul sursă, pentru cei interesați, aruncați o privire. Din moment ce nu este prea marime mare, atunci voi da totul, dar dacă intenționați să utilizați aceleași nume de ID și aceleași căi de fișiere ca ale mele, atunci nici nu trebuie să vă uitați la el, ci pur și simplu să îl conectați înainte de închidere eticheta corporală(în subsol).

Pentru cei care plănuiesc să facă modificări, iată scriptul în sine:

var lazyload = lazyload || (); (funcție($, lazyload) ( "utilizați strict"; var pagina = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = „./pages/” + pagină + „.html”; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, succes: function(response) (dacă ( !răspuns || response.trim() == „NIMIC”) ( $(buttonId).fadeOut(); $(loadingId).text(„Portofoliul este încărcat complet”); return; ) appendContests(răspuns); ), eroare : function(response) ( $(loadingId).text("Ne pare rau, ceva a mers prost cu cererea. Va rugam reimprospatati pagina."); ) )); ); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); pagina += 1; ); ))(jQuery, lazyload) ;

Deci, acum merită să vorbim despre acele fișiere din care vom încărca informații. Scriptul presupune că acestea vor fi fișiere cu nume 2.html…5.html etc. care conține informațiile noastre. De exemplu, fișierul meu 2.html este încărcat primul și are următorul conținut:

În structura site-ului meu, paginile din care vor fi preluate informații pentru încărcare ulterioară atunci când se da clic, se află în folderul pagini. Există trei fișiere, dintre care două sunt pline, iar ultimul este gol. Acesta presupune logica scenariului.

Calea din script este specificată după cum urmează:

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

Dacă intenționați să utilizați o cale diferită, asigurați-vă că o înlocuiți în script. În plus, dacă ați folosit alte ID-uri, atunci acestea vor trebui redefinite în script. Chiar aici:

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

Și, după cum am spus, înainte de eticheta body de închidere, includem scriptul în sine:

Ca asta pe pagina de destinație Puteți implementa încărcare leneșă. Trimiteți mai multe subiecte despre care doriți să citiți un articol pe blog. Pe cât posibil, voi încerca să public nu materialul planificat, ci pe cel despre care întrebați în secțiunea „Sugestiile voastre”. Și pentru azi, asta e tot. Pa!

Cutie cu nisip

recruta 9 februarie 2013 la 21:42

Învârte-mă până la capăt. Aspect receptiv cu defilare infinită

• Cameră de depozitare *

Nu cu mult timp în urmă m-am confruntat cu o problemă:
- Aspect receptiv. Când fereastra este redimensionată, elementele de pe pagină sunt scalate la o anumită lățime. Dacă lățimea este mai mică decât minimul, numărul de elemente din rând devine mai mic, în timp ce umple întregul ecran în lățime. Sensul este clar - pagina ar trebui să arate pe orice monitor, inclusiv. pe dispozitivele mobile.
- Conținutul este încărcat atunci când pagina este derulată, astfel încât doar o parte din conținut este afișată, restul este încărcat pe măsură ce derulați în jos (analog al peretelui VK).
- Apariția elementelor pe pagină are loc pe rând, o creștere lină a transparenței fiecărui element. După ce primul element a devenit opac, efectul este aplicat elementul următor... și așa mai departe pentru toată lumea.

Nu am găsit o soluție gata făcută, a trebuit să scriu totul de la zero. Poate că toată această caracteristică este inutilă, dar dacă dintr-o dată îi vine la îndemână cuiva, o folosim, o testăm, ne bucurăm de ea:

HTML. Pentru testare, am realizat un aspect foarte simplu într-un mod rapid. Ca să nu mă deranjez mult timp cu stilurile, am conectat bootstrap. Iată marcajul:
// În principiu, clasa poate fi inițializată nu aici și fără parametri. Mai multe despre asta mai târziu. // container în care sunt afișate toate elementele. // În cazul nostru, fiecare articol - element separat Pe pagina. Vom scoate multe dintre ele. // ... o mulțime și o mulțime de articol

// Faceți curățarea, pentru că elementul nostru plutitor: stânga

css. Totul aici este pur și simplu scandalos. Am conectat bootstrap, am stabilit câteva stiluri pentru conținut - și plec!
@import url ("bootstrap.css"); body ( fundal: #000; ) section.container ( poziție: absolut; sus: 50px; jos: 50px; lățime: 100%; overflow: auto;) section.container > section.item ( poziție: relativ; float: stânga; margine: 0; umplutură: 0; înălțime: 140 px; depășire: ascuns;) section.container > section.item > img(lățime: 100%;)

JS. Aici este deja interesant. Inițial, am scris funcțiile separat, apoi, când totul a funcționat, le-am combinat într-o singură clasă
GALERIE = ( // setează parametrii impliciti care pot fi suprascriși în timpul inițializării. container: "section.container", // element container părinte: "section.item", // element individual de galerie img: "section.item > img. ascuns ", // imaginea pe care o vom „ascunde” inițial: 200, // întârzie numărul efectului de transparență: 5, // numărul de elemente adăugate init: function(params) ( var _self = this; // Redefinirea parametrilor ( dacă nu, utilizați implicit.) if(params != undefined)( for (var key in params) ( _self = params; ) ) return _self.setUp(); ), setUp: function() ( var _self = this ; // Închideți manevrele de evenimente. În cazul nostru, fereastra (redimensionarea) are nevoie de ele $(window).bind("resize", function()( _self.adjust(); )); // ... pentru a încărca pagina $(document).ready(function()( _self.adjust(); _self.play(); )); // ... pentru a derula în blocul părinte $(_self.container).bind("scroll ", funcția ()( _self.checkScr ol(); )); ), // ajustează lățimea și numărul de articole din rând în funcție de dimensiunea ferestrei ajustează: function() ( var _self = this; var outWidth = $(_self.container).width(); var outHeight = $ (_self.container) .height(); var minWidth = 220; var cnt = Math.floor(outWidth / minWidth); var itemWidth = outWidth / cnt; $(_self.item).css(( "width": itemWidth + "px" )) ; ), // Începe efectul de apariție treptată a elementelor. O mică nuanță: Clasa // ascunsă pentru imagine este necesară nu pentru a o ascunde (acest lucru se va face prin metoda de mai jos), ci pentru a găsi // primul element de fiecare dată când conținutul este actualizat. Ciclu metoda de joc() repetă // prin toate imaginile cu o clasă ascunsă (toate au una implicit), după aplicarea // efectul fadeIn(), eliminând clasa. Astfel, la încărcarea conținutului nou, bucla începe // nu de la primul element, ci de la primul încărcat. // Prima întâlnire folosind metoda queue(). play: function() ( var _self = this; var items = $(_self.container).find(_self.img); $(items).each(function(i) ( var cur = $(this).hide( ); $(document).queue("myQueue", function(n) ( cur.removeClass("hidden").fadeIn(_self.interval, n); )); )); $(document).dequeue(" myQueue"); ), // Conținutul se încarcă singur. Totul este simplu aici: trimitem o cerere către server - obținem // conținut nou pe pagină (dacă există) și îl afișăm la sfârșitul încărcării blocului părinte: function() ( var _self = this; $. ajax(( url: "/load .php", tip: "POST", date: ("count": _self.count), dataType: "json", succes: function(json) ( if(json.output) ( $(_self.container).children ("div.clearfix").before(json.output); _self.adjust(); _self.play(); ) ) )); ), // Verificați starea derulării. Dacă defilare verticalăîn blocul părinte // este egal cu maximul posibil - trimitem o solicitare pentru conținut nou. // Astfel, încărcarea conținutului va fi efectuată numai dacă // am derulat pagina până la final. checkScroll: function() ( var _self = this; 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. Totul este primitiv aici, doar pentru testare.
$json = matrice(); $html = ""; $items_on_page = !empty($_POST["count"])? (int)$_POST["număr"]: 5; pentru($i = 0; $i< $items_on_page; $i++) { $html .= ""; ) $json["ieșire"] = $html; echo json_encode($json);
Aici se trece un singur parametru către $_POST (numărul de blocuri de adăugat), dar puteți trece suplimentar un punct de start, conform principiului paginației. Poate fi obținut în JS cu:
var items = $(_self.container).find(_self.img); var start = itemi.lungime; // și transmiteți cererea: data: ("count": _self.count, "start": start), // ... după care, la preluarea datelor, specificați..." LIMIT " . (int)$_POST["start"] . ", ". $items_on_page;

Așa a rezultat „paginare fără paginare”, dar pe o pagină de cauciuc. Exemplu de lucru aici.

În 2011, era foarte la modă (în opinia mea, această modă a venit de la Facebook) să faci „defilare infinită” pe site-urile tale: acesta este momentul în care utilizatorul răsucește și rotește rotița mouse-ului și toate rezultatele de căutare noi sunt încărcate de Ajax la partea de jos a paginii, transformând derularea normală în nesfârșită și provocând „disonanță cognitivă” la utilizatorul care a întâlnit-o pentru prima dată.

De asemenea, am văzut recent un articol pe acest site în care autorul și-a exprimat nemulțumirea față de „defilarea infinită” și a cerut folosirea vechiului „paginare”.

Sunt de acord cu autorul. Eu însumi sunt dependent de droguri și, uneori, stau la monitor parcă fermecat, cu ochii sticloși, răsucesc-răucesc-învârtesc roata magică, incapabil să merg la afaceri / la muncă / la magazin / mănânc / beau / la toaletă și o răsucesc cu un singur gând: „Ei bine, când veți termina cu toții?!” (Ce poți face - sunt obișnuit să duc lucrurile până la capăt).

Într-o dimineață m-am trezit și m-am hotărât ferm: „Destul de asta!”.

Vă prezint micul meu scenariu, pe care l-am scris recent pentru " rețea socială(cu blackjack și prostituate).

Pentru a vedea o demonstrație, descărcați arhiva și rulați fișierul „test/test.html”.

Ce inovații oferă acest script:

Deoarece au transformat „bara de defilare” principală în ceva de neînțeles, trebuie să returnăm „bara de defilare” normală, ceea ce am făcut desenând o bandă gri în partea dreaptă a paginii, imediat la stânga „barei de defilare” obișnuită.

Cât de departe a ajuns această bandă de sus este câte rezultate ale eșantionului am parcurs deja. În general, această bandă este ca neagră. Unde este gri este locul din întregul eșantion în care ne aflăm acum.

De asemenea, rețineți că adresa paginii se schimbă pe măsură ce derulați. Astfel, în această seară puteți derula pe jumătate, puteți marca pagina, opri computerul, mergeți la culcare, vă treziți dimineața, porniți computerul, mergeți la pagina pe care ați marcat-o ieri înainte de a merge la culcare și continuați derularea din chiar locul unde te-ai oprit. Și, în plus, puteți derula din acest loc nu numai înainte, ci și înapoi.

Și despre navigarea către orice pagina dorită: puteți ajunge și aici la orice pagină - doar înlocuiți numărul paginii de selecție de care aveți nevoie în adresa paginii web. Deoarece adresele URL care pot fi citite de oameni sunt acum standardul, aceasta ar trebui să fie o soluție bună.

Acest scenariu, evident, nu este ceva sculptat în granit, iar eu însumi, trezindu-mă azi dimineață, am rescris jumătate din el. Cu toate acestea, performanța pare a fi stabilă și a fost testată cel mai recent versiuni Chromeși Firefox. Voi spune imediat: nu urmăresc „compatibilitatea între browsere” - poate fi întotdeauna terminat dacă cineva dorește să folosească acest script pe site-ul său „încrucișat”.

Se pare că totul, demo-ul vorbește de la sine. Postarea provoacă comentarii.

Ce altceva se poate face (pe baza comentariilor):

Când faceți clic oriunde pe bandă - mergeți la pagina de selecție corespunzătoare.

Eliminați paginile de date din partea de sus a paginii web când există prea multe date pe pagina web (pentru a nu încetini).

Exemple de „defilare infinită” îmbunătățită.

A trecut ceva timp de când am postat vreun cod. Astăzi voi corecta situația și voi oferi câteva fragmente jQuery utile de care veți avea nevoie cu siguranță pe site-urile dvs.

Nu voi intra în teorie, toată documentația jQuery este pe site-ul oficial al bibliotecii. Îți voi aminti doar ce este jQuery.

jQuery este o bibliotecă JavaScript care se concentrează pe interacțiunea dintre JavaScript și HTML. Biblioteca jQuery facilitează accesarea oricărui element DOM, accesarea atributelor și conținutul elementelor DOM și manipularea acestora. Biblioteca jQuery oferă, de asemenea, un API convenabil pentru lucrul cu AJAX.

Deci să mergem!

1. Defilare lină în partea de sus a paginii

Niciun site web nu este complet fără el. Doar 4 rânduri de cod le vor permite vizitatorilor să deruleze fără probleme întreaga pagină în sus cu un singur clic.

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

2. Duplicați antetele tabelului

Pentru a îmbunătăți percepția și lizibilitatea tabelelor, le puteți duplica titlurile sub tabel. S-ar părea un fleac, dar este foarte convenabil în mesele complexe și mari care nu se potrivesc pe un singur ecran.

$tfoot = $(" "); $($("thead").clone(true, true).children().get().reverse()).each(function()( $tfoot.append($(this)); ) ); $tfoot.insertAfter("la masă");

3. Încărcarea datelor externe

DIN jQuery Este foarte ușor să încărcați conținut extern pe paginile web. Poate fi afișat direct într-un bloc DIV, ca în exemplul de mai jos.

$("#conținut").load("un fișier.html", function(răspuns, stare, xhr) ( // gestionarea erorii if(status == "eroare") ( $("#conținut").html(" A apărut o eroare: " + xhr.status + " " + xhr.statusText); ) ));

4. Înălțime egală a coloanei

Se știe că pentru a alinia blocurile în înălțime cu standard HTML iar CSS nu este atât de ușor. Doar câteva linii de cod de mai jos vă vor permite să faceți înălțimea tuturor blocurilor egală cu înălțimea blocului mai mare.

varmaxheight = 0; $("div.col").each(function()( if($(this).height() > maxheight) (maxheight = $(this).height(); ) )); $("div.col").height(maxheight);

5. Zebra tabulară

După cum știți, percepția și lizibilitatea tabelului vor fi considerabil mai mari dacă faceți alternanță de rânduri multicolore. Acest lucru este foarte ușor de implementat cu jQuery.

$(document).ready(function()( $("table tr:even").addClass("stripe"); ));

6. Reîmprospătare parțială a paginii

Cu jQuery este foarte ușor să implementați o reîmprospătare bloc (parțială) a paginii. De exemplu, codul de mai jos vă va permite să actualizați automat blocul #refresh la fiecare 10 secunde.

SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // milisecunde de așteptat

7. Preîncărcare imagine

Acest cod vă permite să încărcați imagini în fundal fără a se încărca în timpul navigării pe pagină. Doar enumerați în rândul 7 imaginile pe care trebuie să le preîncărcați.

$.preloadImages = function() ( for(var i = 0; i ").attr("src", argumente[i]); ) ) $(document).ready(function() ( $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); ));

8. Deschiderea linkurilor externe în ferestre/file noi

Acest fragment forțează ca toate linkurile externe de pe pagină să se deschidă într-o nouă fereastră de browser. Scriptul determină în mod banal domeniul curent al site-ului și funcționează dacă nu se potrivește cu adresa din link.

$("a").each(function() ( var a = new RegExp ("/" + window.location.host + "/"); if(!a.test(this.href)) ( $(this) ).click(function(event) ( event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); )); ) ));

9. Blocați în toată fereastra browserului

Acest script vă va ajuta să întindeți blocul pentru a umple ecranul browserului. Excelent pentru ferestre modale și dialoguri.

var winWidth = $(fereastră).width(); var winHeight = $(fereastră).height(); $("div").css(( "lățime": winWidth, "height": winHeight, )); $(fereastra).resize(function()( $("div").css(( "latime": winWidth, "height": winHeight, )); ));

10. Verificarea complexității parolei

Dacă permiteți vizitatorilor site-ului dvs. să-și seteze propriile parole, ar fi o idee bună să controlați complexitatea acestuia și să informați vizitatorul despre acest lucru.

Mai întâi, să scriem partea HTML a codului:

Și cu ajutorul codului de mai jos, vom verifica parola introdusă și vom afișa informații vizitatorului: parola acestuia este complexă, medie sau slabă și, de asemenea, verificăm dacă este prea scurtă.

$("#pass").keyup(function(e) ( var strongRegex = new RegExp ("^(?=.(8,))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp ("^(?=.(7,))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var enoughRegex = new RegExp ("( ?=.(6,)).*", "g"); if (fals == enoughRegex.test($(this).val())) ( $("#passstrength").html("Mai multe caractere "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("Puternic!" ); ) else if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "alerta"; $("#passstrength").html("Medium!") ; ) else ( $("#passstrength").className = "eroare"; $("#passstrength").html("Slab!"); ) return true; ));

11. Redimensionarea imaginii cu jQuery

Desigur, este mai logic să redimensionați imaginile pe partea de server folosind PHP și GD, dar există situații în care acest lucru trebuie făcut pe partea clientului. Și jQuery ne va ajuta din nou cu asta.

$(window).bind("încărcare", function() ( $("#product_cat_list img").each(function() ( var maxWidth = 120; var maxHeight = 120; var ratio = 0; var lățime = $( this).width(); var înălțime = $(this).height(); if(width > maxWidth)(raport = maxWidth / width; $(this).css(„width”, maxWidth); $(this) .css(„înălțime”, înălțime * raport); înălțime = înălțime * raport; ) var lățime = $(this).width(); var înălțime = $(this).height(); if(height > maxHeight)( raport = maxHeight / înălțime; $(this).css(„înălțime”, maxHeight); $(this).css(„lățime”, lățime * raport); lățime = lățime * raport; ) )); //$( "#contentpage img").show(); // RESIZE IMAGINE ));

12. Încărcarea conținutului la derularea în jos a paginii

Această tehnică este adesea denumită defilare infinită. Conținutul este încărcat pe măsură ce utilizatorul derulează pagina. Acest lucru este destul de ușor de implementat cu codul de mai jos.

var loading = false; $(fereastră).scroll(funcție()( dacă ((($(fereastră).scrollTop()+$(fereastră).height())+250)>=$(document).height())( dacă( încărcare == fals)( încărcare = adevărat; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max"). val(), function(loaded)( $("body").append(loaded); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("display","none"); loading = false; )); ) ) )); $(document).ready(function() ( $("#loaded_max").val(50); ));

13. Verificați încărcarea imaginii

Se întâmplă adesea că trebuie să verificați dacă o imagine este încărcată sau nu. Și jQuery ne va ajuta din nou cu asta.

Var imgsrc = "img/image1.png"; $(" ").load(function () ( alert("imagine încărcată"); )).error(function () ( alert("eroare la încărcarea imaginii"); )).attr("src", imgsrc);

14. Sortați alfabetic

Dacă trebuie să sortați dinamic o listă în ordine alfabetică, acest mic fragment vă va ajuta cu siguranță.

$(function() ( $.fn.sortList = function() ( var mylist = $(this); var listetems = $("li", mylist).get(); listitems.sort(function(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(); });

Salvare - util.

Toate cele mai recente și mai interesante din lumea WordPress pe canalul meu Telegram. Abonati-va!