Utilizând pictogramele de descărcare

Imaginați-vă situația când vizitați un site nou. Tot conținutul site-ului de care aveți nevoie, ca și cum nu ar fi încărcat. Nu știți dacă se întâmplă ceva sau nu este nimic pe pagină. În final, părăsiți pagina.







Această situație este foarte frecventă atunci când diferite site-uri utilizează fișiere mari la momentul încărcării. Pentru a face față acestei situații, trebuie să utilizați pictograma de descărcare, care va arăta că site-ul este încărcat.

În această lecție simplă, veți învăța cum să faceți acest lucru pe pagina dvs.

Versiunea demo se află aici. Fișierele pot fi descărcate aici.

1. O pictogramă de descărcare care poate fi selectată aici. Pentru lecția noastră vom folosi:

2. La începutul documentului dintre etichete trebuie să conectați jQuery (rețineți calea spre fișier).

3. Se adaugă funcția imediat după codul de sus, care va ascunde stratul ( „mare-img“) conținut (în acest exemplu utilizează o imagine mare, dar în locul ei ar putea fi ceva de genul), atâta timp cât acesta nu este complet încărcată. După funcția de încărcare-l, și un strat ( „încărcător“) cu pictograma ascunderea va afișa.

Asta e tot! Bucurați-vă de succesul tuturor weekend-urilor!

P.S. la cererea vizitatorilor noștri stimat, vă ofer cod CSS care vă va ajuta să plasați pictograma de descărcare în centru:

Pentru ca totul să funcționeze, este necesar să cunoaștem lățimea și înălțimea imaginii de încărcare. În exemplul nostru, înălțimea este de 22 pixeli, lățimea este de 126 de pixeli. Am pus-o în cod. De asemenea, în două rânduri, va trebui să introduceți 50% din lățime și înălțime.

De asemenea, va fi necesar să se atribuie clasei "centrate" în imagine:

Toate acestea funcționează bine :) Versiunea demo nu a fost încă actualizată.

Ultimele 5 lecții din rubrica "jQuery"

Astăzi dorim să vă spunem despre biblioteca TypeIt - un plugin jQuery gratuit. Cu aceasta, puteți simula tastarea. Dacă totul este ajustat corect, puteți obține un efect foarte realist.

  • jQuery plugin pentru crearea unei cronologii.

  • jQuery plugin pentru crearea unei diagrame Gantt.

  • Un exemplu de încărcare a unui fișier prin PHP și jQuery ajax.

    vă mulțumesc. lucru util

  • la lansări ulterioare, din anumite motive, nu există nicio încărcare a pictogramelor, dar desenul este afișat imediat. testat de Opera.

  • dima, doar o imagine aflată deja în memoria cache, încărcată rapid și imaginea de progres nu are timp să pară

  • Nu știu. Încep să încărc pagina care arată descărcarea, după 10 20 de secunde pe care le actualizez și totul este încărcat.







  • Am ghicit cum puteți aplica un astfel de lucru pentru întregul site: Pur și simplu asociați id = "large-img" pentru scheletul principal al site-ului. Totul funcționează, doar invers))) De exemplu. la început întregul site este încărcat și apoi totul dispare))) este necesar ca acesta să modifice acest script: $ (function () <$('#large-img').hide(); $('#large-img').load( function() <$('#loader').hide(); $('#large-img').show();> );>) Nu înțeleg acest lucru, putem gândi împreună!

  • Pentru a încărca o pagină, codul ar trebui să arate astfel: $ (function () <$('#wrapper').hide(); $(window).load(function() <$('#loader').hide(); $('#wrapper').show();>)>); ------------------- * unde "wrapper" este ID-ul tabelului principal sau elementului div. ------------------- Am următorul cod de pagină și totul funcționează:

  • Totul conectat, a făcut după cum a prescris Fenex, a eliminat două linii din stilul: margin-top: -11px; / * 50% din înălțimea * / margin-stânga: -63px; / * 50% lățime * / și totul funcționează pentru întreaga pagină. Pur și simplu super! Mulțumesc!

  • Ai o greșeală în lecție Două citate suplimentare!

  • Te rog, ajuta. Trebuie să folosesc această pictogramă în situația cu ajutorul aplicației. Când selectați o imagine, faceți clic pe "Încărcați" și că în acest moment această pictogramă apare în locul imaginii și după încărcarea imaginii pictograma a dispărut.

  • este probabil pentru un internet lent pentru că nu am văzut descărcarea deloc))

  • Nu este mai ușor să creați un div și să selectați un preloader în imaginea de fundal?

    djamalutdin

    Am instalat complet acest cip, îmi place totul. o astfel de problemă, care este instalat pe site-ul: jQuery plug-in pentru încărcare mai rapidă, și ea reîncărcați pagina nu se întâmplă, dar pagina se deschide cu o ușoară întârziere, și așa nu-mi spune dacă doriți, puteți aranja același cip ca în acest tutorial, doar întârziere jQuery plugin ?

    Utilizând pictogramele de descărcare

    Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!

    Utilizând pictogramele de descărcare

    Utilizând pictogramele de descărcare

    Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

    Utilizând pictogramele de descărcare

    Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.

    Utilizând pictogramele de descărcare

    Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!







    Articole similare

    Pagina anterioară

    Pagina următoare

    Trimiteți-le prietenilor: