Slik lager du en fantastisk bildepreloader

Hvor ofte finner du at bilder på et nettsted lastes grasiøst; typen der et ikon for lasting først vises, og bildet fades deretter inn, en gang lastet? Denne teknikken kan i stor grad øke ytelsen til nettstedet ditt. Hvis du ikke allerede er kjent med denne metoden, har du lykke til! I dag lager vi et forprogrammeringsplugin for prosjektene dine. Fascinert? La oss komme i gang!

Trinn 1: Sette opp arbeidsområdet

Først skal vi sette opp prosjektmappen for denne opplæringen. Vi trenger:

Vår viktigste HTML-fil
CSS-mappe for stilarket og lasteikonet (i 'I' -mappen)
JS-mappe for jQuery og vårt plugin
BILDER

Trinn 2: HTML

Vi skal begynne med HTML-koden.

     Bildepreloader       Preloader - Legg bilder med stil

Ikke noe fancy her: Bare vanlig HTML-kode for et enkelt galleri. Vi har importert jQuery, vårt plugin jquery.preloader.js (for øyeblikket tom), og vår forhåndsinnstillinger stilark. For å fullføre, legger vi til en uordnet liste, som vil inneholde listeposter som bilder innpakket av en ankermerke (vanligvis gjort på et nettsted for å åpne en lysboks eller koble til et nettsted).

Legg merke til at ekstra p Tagpakning hvert anker brukes til å stylere bildet; de er ikke eksplisitt kreves.

Trinn 3: CSS

Nå skal vi lage en preloader.css stilark i css mappe, og i det, lag en undermappe Jeg der vi vil beholde vårt forhåndsindikatorikon. Preloaders.net har en fin samling av lastingsikoner som du kan velge mellom. Legg til følgende kode i stilarket ditt:

 * margin: 0; padding: 0;  kropp bakgrunn: url (i / bg.jpg);  #container width: 960px; margin: 0px auto;  h2 font-weight: 100; tekstskygge: #ffffff 1px 1px 0px; tekst-Justering: center; padding: 20 piksler; font-size: 32 piksler; color: # 555555; border-bottom: 1px stiplet #ccc; margin-bottom: 30px; font-familie: Georgia, "Times New Roman", Times, Serif;

Først har vi opprettet en 960 x sentrert container, og har lagt til en bakgrunn til siden. I tillegg har vi lagt til noen grunnleggende styling til tittelen ( h2 stikkord ).

Styling Gallery

Deretter skal vi stillegge galleriet og, mens vi er på det, kaster inn litt CSS3 godhet.

 #gallery listestil: none;  #gallery li bakgrunn: # e8e8e8; float: venstre; display: block; grense: 1px solid # d7d7d7; -moz-border-radius: 4 piksler; -webkit-border-radius: 4 piksler; border-radius: 4 piksler; -webkit-boks-skygge: 1px 1px 6px #ddd; -moz-box-shadow: 1px 1px 6px #ddd; boks-skygge: 1px 1px 6px #ddd; margin: 15px 56px; padding: 0;  #gallery li p grense: 1px solid #fff; -moz-border-radius: 4 piksler; -webkit-border-radius: 4 piksler; border-radius: 4 piksler; margin: 0; padding: 7px;  #gallery li a display: block; farge: #fff; text-decoration: none; padding: 0;  #gallery img width: 315px; høyde: 210px; margin: 0; padding: 0;

På dette tidspunktet bør vårt galleri se slik ut:

Konfigurere forhåndsinnlastingsklassen

La oss lage en preloader klasse som vil være ansvarlig for å vise lastikonet mens bilder lastes.

 .forlaster bakgrunn: url (i / 89.gif) senter senter no-repeat #ffffff; display: inline-blokk;

Preloaderelementet er vise Eiendommen må settes til blokkere eller inline blokk; Ellers vises ikke ikonet for lasting.

Trinn 4: Skriver plugin

La oss begynne med å lage pluginstrukturen og alternativene.

Å tillate for tilpasningsalternativer gjør et plugin langt mer fleksibelt for brukeren.

Vi starter med grunnstrukturen:

 $ .fn.preloader = funksjon (valg) var standard = forsinkelse: 200, preload_parent: "a", check_timer: 300, ondone: funksjon () , oneachload: funksjon (bilde) , fadein: 500 ; // variabler erklære og forklare bilder og foreldrebeholder var alternativer = $ .extend (standard, alternativer),

Våre alternativer

utsette - Etterfølgende forsinkelse mellom fading i bilder
preload_parent - Legg til forhåndsbelastningsklasse til foreldrene nevnt. Hvis ikke funnet, er bildet pakket inn i en ankermerke
ondone - Tilbakeringing som skal utføres når alle bildene er lastet
oneachload - Kalt når hvert bilde er lastet med bilde som parameter
fadein - Fade i animasjonsvarighet

Trinn 5: Variabler

Deretter erklærer og forklarer vi de variablene vi skal bruke i resten av plugin.

 var standard = forsinkelse: 200, preload_parent: "a", check_timer: 300, ondone: funksjon () , oneachload: funksjon (bilde) , fadein: 500; // variabler erklære og forklare bilder og foreldrebeholder var alternativer = $ .extend (standard, alternativer), root = $ (dette), bilder = root.find ("img"). css ("synlighet" , opacity: 0), timer, counter = 0, i = 0, checkFlag = [], delaySum = options.delay;

For det første forvirrer vi rotelementet (alltid en god praksis), så finn bildene (gjør dem også skjult) og til slutt deklarere variablene som vil bli forklart i større detalj når vi motvirker dem.

Det er to ting verdt å merke seg her: du kan i utgangspunktet tro at den enkleste løsningen er å skjule bildene, og deretter fade dem inn, i stedet for å hoppe gjennom all denne koden. Problemet er imidlertid at hvis vi skjuler bildene, markerer nettleseren plassen de pleide å okkupere som tom, og dermed blir selve oppsettet ødelagt når de til slutt falmer inn. Ok, vel, hva om vi brukte opasitet å "vise" og "skjule" bildene? Det er en bedre praksis, men noen versjoner av IE liker ikke denne metoden.

Trinn 6: Legge til Preloader klasse

Vi vil nå deterere over hvert bildeelement, og kontrollere om overordnet er det som er nevnt i alternativet. Hvis så er tilfelle, legger vi vår preloader klasse til det; ellers pakker vi bildet i et ankermerke med en klasse av preloader.

 images.each (function () var $ this = $ (dette); hvis ($ this.parent (options.preload_parent) .length == 0) $ this.wrap (""); else $ this. foreldre (). addClass ("preloader"); checkFlag [i ++] = false;); images = $ .makeArray (bilder);

Her bruker vi en matrise checkFlag, og setter hver vares elementverdi til falsk. Dens bruk vil bli gjort tydelig når du beveger deg.

Trinn 7: Ta med alt sammen

Vi skal nå gjennomføre det som faktisk skjer bak kulissene. Det er en boolean eiendom, kalt fullstendig, knyttet til bildeobjektet. Når bildet er lastet helt, er dette boolean satt til ekte. Så, vi fortsetter å sjekke denne egenskapen for hvert bilde, og hvis det faktisk er satt til ekte, vi fade i bildet.

Vi kan bruke setInterval Fungerer for kontinuerlig å avgjøre om bildene er lastet eller ikke. Det er her check_timer alternativet kommer inn: det kartlegges direkte til timers frekvens.

Et bilde har også en på Last hendelse knyttet til det; du lurer sikkert på hvorfor vi ikke bruker det. Årsaken er at noen nettlesere ikke fungerer bra med den hendelsen; Som sådan hopper vi over det. Vi trenger en løsning som fungerer som en sjarm over alle nettlesere. Vi starter med:

 init = funksjon () timer = setInterval (funksjon () , options.check_timer);

tidsur er variabelen som vil referere til timeren. Dette er nødvendig for å slutte å stoppe timeren. Denne funksjonen er erklært sammen med alle variablene.

Kontrollerer hvert bilde

Vi vil iterere gjennom arrayet og sjekke hvert bilde fullstendig egenskap for å avgjøre om det er ferdig med nedlasting. Hvis den er lastet ned, vil vi sette den til synlig og falme inn sakte. Når animasjonen er avsluttet, fjerner vi forlasterklassen fra forelderen.

 for (i = 0; i  Det er et lite problem her: timeren fortsetter å sjekke - jevn etter bildene er alle lastet. For å motvirke dette, legger vi til en tellervariabel, og øker den etter hvert bilde er lastet inn. På denne måten kan vi sjekke om tellervariabelen er lik størrelsen på bildarammen. Hvis det er tilfelle, stopper vi.
  timer = setInterval (funksjon () hvis (counter> = checkFlag.length) clearInterval (timer); options.ondone (); return; for (i = 0; i Det er imidlertid et annet lite problem nå. Timeren vår kan stoppe tidligere enn forventet; Hvis ett bilde er lastet, er det fullstendig eiendommen er satt til ekte og telleren øker dermed med 1. Nå, når sløyfen kjører neste gang, er bildet allerede lastet, den fullstendig eiendommen er satt tilekte, og slik vil løkken løpe to ganger! For å overvinne dette problemet bruker vi checkFlag array. Når et bilde er lastet, setter vi inn checkFlag til ekte, og sett betingelsen for telleren for å øke bare under forutsetning av at checkFlag verdien er falsk. Så telleren økes kun én gang: når et bilde lastes for første gang.
  timer = setInterval (funksjon () hvis (counter> gtkflag.length) clearInterval (timer); options.ondone (); return; for (i = 0; i & lt; images.length; i ++) if (bilder [i] .complete == true) if (checkFlag [i] == false) checkFlag [i] = true; options.oneachload (bilder [i]); counter ++; delaySum = delaySum + alternativer. forsinkelse; $ (bilder [i]). css ("synlighet", "synlig") forsinkelse (delaySum) .animate (opacity: 1, options.fadein, function () $ ) .removeClass ("preloader"););, options.check_timer);
  Legg merke til at vi kaller ondone Fungerer når tellerflagget er større enn gruppens lengde - dvs. når alle bildene er lastet. Når telleren økes, oneachload kalles med det nåværende bildet bestått som parameter.
 
  Trinn 8: Den enkle delen 
 Til slutt, i dette trinnet, kaller vi i det(); funksjonen på slutten av plugin. 
  i det(); // kalt på siste linje av plugin
 Det er alt; Vi har laget et fullt fungerende preloading plugin, og størrelsen er mindre enn 2kb. Likevel gjenstår ett problem: Lastbilikonbildet lastes tilfeldig. Vi vil ikke ha det. I neste avsnitt vil vi ta vare på det.
 
  Trinn 9: Går den ekstra mile 
  For å fikse problemet nevnt ovenfor, laster vi inn ikonet først, og deretter ringer du på i det funksjon. Men ikonet for lasting er et bakgrunnsbilde, så vi injiserer det som et bilde på siden, mens du holder den skjult. Når den laster, kaller vi i det funksjon. Vi laster i hovedsak selve ikonet. 
  varikon = jQuery ("", id: 'loadingicon', src: 'css / i / 89.gif'). skjul (). appendTo (" body "); timer = setInterval (funksjon () hvis (ikon [0] == true) clearInterval (timer); init (); icon.remove (); return;, 100);
 Først oppretter vi et bildeobjekt med en id av loadingicon, og a kilde peker til banen til lastingsikonet. Deretter legger vi det til kropp og skjul det i utgangspunktet. Til slutt angir vi intervallet for å sjekke om ikonet er lastet eller ikke. Hvis den har, dreper vi timeren, og begynner å forhåndsbelaste bildene. Ikke glem å fjerne det ikonet også! 
 
 Konklusjon
 Med det siste skrittet er vi ferdige! Denne funksjonaliteten fungerer i alle nettlesere, akkurat som forventet, og nedbrytes grasiøst. Bare vær sikker på å angi forhåndslasterelementet vise eiendom til blokkere eller inline-blokk. Det er nå klart for bruk i prosjektene dine. Takk for at du leste!



		
			
	   
	




Kode