Så här skapar du en fantastisk bildpreloader

Hur ofta tycker du att bilder på en webbplats laddas graciöst den typ där en laddningsikon först visas, och bilden sedan bleknar, en gång laddad? Denna teknik kan kraftigt öka prestandan på din webbplats. Om du inte redan är bekant med den här metoden har du lycka till! Idag skapar vi ett preloader plugin för dina projekt. Fascinerad? Låt oss börja!

Steg 1: Ställa in din arbetsyta

Först ska vi ställa in projektmappen för denna handledning. Vi behöver:

Vår huvudsakliga HTML-fil
CSS-mappen för vårt stilark och laddningsikon (i "I" -mappen)
JS-mappen för jQuery och vårt plugin
BILDER

Steg 2: HTML

Vi ska börja med HTML-koden.

     Bildpreloader       Preloader - Ladda bilder med stil

Inget fint här: helt enkelt HTML-kod för ett enkelt galleri. Vi har importerat jQuery, vårt plugin jquery.preloader.js (för närvarande tom) och vår preloader stilark. För att avsluta lägger vi till en oorderad lista, som innehåller listobjekt som bilder som är inslagna av en ankaremärke (vanligtvis gjort på en webbplats för att öppna en ljuskälla eller länka till en webbplats).

Observera att extra p etikettförpackning varje ankare används för att ställa in bilden; de är inte uttryckligen nödvändiga.

Steg 3: CSS

Nu ska vi skapa en preloader.css stylesheet i css mapp, och inuti det, skapa en undermapp jag där vi kommer att behålla vår preloaderikon. Preloaders.net har en bra samling av laddningsikoner som du kan välja mellan. Lägg till följande kod i ditt stilark:

 * marginal: 0; padding: 0;  kropp bakgrund: url (i / bg.jpg);  #container width: 960px; marginal: 0px auto;  h2 font-vikt: 100; textskugga: #ffffff 1px 1px 0px; text-align: center; padding: 20px; font-size: 32px; color: # 555555; border-bottom: 1px stupad #ccc; margin-bottom: 30px; font-family: Georgia, "Times New Roman", Times, Serif;

Först har vi skapat en 960 x centrerad behållare och har lagt till en bakgrund till sidan. Dessutom har vi lagt till en del grundläggande styling till titeln ( h2 tagg).

Styling Gallery

Sedan ska vi stila galleriet och, medan vi är på det, kasta in lite CSS3 godhet.

 #gallery list-style: none;  #gallery li background: # e8e8e8; flyta till vänster; display: block; gränsen: 1px solid # d7d7d7; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-skugga: 1px 1px 6px #ddd; -moz-box-skugga: 1px 1px 6px #ddd; boxskugga: 1px 1px 6px #ddd; marginal: 15px 56px; padding: 0;  #gallery li p border: 1px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; marginal: 0; padding: 7PX;  #gallery li a display: block; färg: #fff; text-decoration: none; padding: 0;  #gallery img width: 315px; höjd: 210px; marginal: 0; padding: 0;

Vid det här laget ska vårt galleri se ut så här:

Ställa in förprogrammerarklassen

Låt oss skapa en preloader klass som ansvarar för att visa laddningsikonen medan bilder laddas.

 .förläsare bakgrund: url (i / 89.gif) center center no-repeat #ffffff; display: inline-block;

Preloaderelementet är visa egendom måste ställas in på blockera eller inline block; annars visas inte laddningsikonen.

Steg 4: Skriva plugin

Låt oss börja med att skapa pluginstrukturen och alternativen.

Tillåt för anpassningsalternativ gör ett plugin mycket flexiblare för användaren.

Vi börjar med basstrukturen:

 $ .fn.preloader = funktion (alternativ) var standard = fördröjning: 200, preload_parent: "a", check_timer: 300, ondone: funktion () , oneachload: funktion (bild) , fadein: 500 ; // variabler deklarera och precachera bilder och föräldrabehållare var alternativ = $ .extend (standardvärden, alternativ),

Våra alternativ

fördröjning - Efterföljande fördröjning mellan blekning i bilder
preload_parent - Lägg till förladdningsklass till den förälder som nämns. Om den inte hittas, är bilden insvept i en ankare
ondone - Återuppringning som ska utföras när alla bilder laddas
oneachload - Kallas när varje bild laddas med bild som parameter
FadeIn - Fade i animationens varaktighet

Steg 5: Variabler

Därefter förklara och förklara vi vilka variabler vi ska använda i resten av plugin.

 var standard = fördröjning: 200, preload_parent: "a", check_timer: 300, ondone: funktion () , oneachload: funktion (bild) , fadein: 500; // variabler deklarerar och precacherar bilder och föräldrabehållare var alternativ = $ .extend (standardvärden, alternativ), root = $ (detta), bilder = root.find ("img"). css ("synlighet" , opacitet: 0), timer, räknare = 0, i = 0, checkFlag = [], delaySum = options.delay;

För det första preciserar vi rotelementet (alltid en bra metod), hitta sedan bilderna (gör dem också gömda) och slutligen deklarera de variabler som kommer att förklaras närmare när vi motverkar dem.

Det finns två saker som är värda att notera här: du kan till och med tro att den enklaste lösningen är att dölja bilderna, och sedan blekna dem, snarare än att hoppa genom hela denna kod. Problemet är emellertid att om vi döljer bilderna markerar webbläsaren det utrymme som de brukade ockupera som tomt, och sålunda är själva layouten förstörd när de slutligen bleknade i. Okej, bra, vad om vi använde opacitet att "visa" och "dölja" bilderna? Det är en bättre övning, men vissa versioner av IE gillar inte den här metoden.

Steg 6: Lägga till förläsarklass

Vi kommer nu att iterera över varje bildelement och kontrollera om dess förälder är den som nämns i alternativet. Om så är fallet lägger vi till vår preloader klass till den; Annars sätter vi in bilden i en ankare med en klass av preloader.

 images.each (function () var $ this = $ (detta); om ($ this.parent (options.preload_parent) .length == 0) $ this.wrap (""); annars $ this. förälder (). addClass ("preloader"); checkFlag [i ++] = false;); images = $ .makeArray (bilder);

Här använder vi en array checkFlag, och ställer in varje arrays objektvärde till falsk. Dess användning kommer att klargöras när du flyttar.

Steg 7: Ta med allt tillsammans

Vi ska nu genomföra vad som faktiskt händer bakom kulisserna. Det finns en boolean egendom, kallad komplett, associerad med bildobjektet. När bilden har laddats helt, är denna boolean inställd på Sann. Så vi fortsätter att kolla den här egenskapen för varje bild, och om den verkligen är inställd på Sann, vi bleknar i den bilden.

Vi kan använda setInterval funktionen för att kontinuerligt bestämma om bilderna har laddats eller inte. Det är här check_timer alternativet kommer in: det kartläggs direkt till vår timer frekvens.

En bild har också en onload händelse i samband med det; du undrar förmodligen varför vi inte använder den. Anledningen är att vissa webbläsare inte fungerar bra med den händelsen; Som sådan hoppar vi över det. Vi behöver en lösning som fungerar som en charm över alla webbläsare. Vi börjar med:

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

timer är variabeln som kommer att referera till timern. Detta behövs för att slutligen stoppa timern. Denna funktion deklareras tillsammans med alla variablerna.

Kontrollera varje bild

Vi kommer att iterera genom arrayen och kontrollera varje bild komplett egenskap för att avgöra om det har slutförts nedladdning. Om den har laddats ner, sätter vi den på synlig och bleknar långsamt. När animationen är avslutad tar vi bort förläsarklassen från dess förälder.

 för (i = 0; i  Det är en liten fråga här: timern fortsätter att kontrollera - jämna efter bilderna har alla laddats. För att motverka detta lägger vi till en räknarevariabel och ökar den efter varje bild har laddats. På så sätt kan vi kontrollera om räknaren är lika med storleken på bilderna. Om så är fallet slutar vi.
  timer = setInterval (funktion () if (counter> = checkFlag.length) clearInterval (timer); options.ondone (); return; för (i = 0; i Det finns dock en annan liten fråga nu. Vår timer kan sluta tidigare än förväntat Om en bild har laddats, är dess komplett egendom har blivit inställd på Sann och räknaren ökar således med 1. Nu, när slingan går nästa gång, är bilden redan laddad, den komplett fastigheten är inställd påSann, och sålunda kommer slingan att springa två gånger! För att lösa detta problem använder vi checkFlag array. När en bild är laddad ställer vi in checkFlag till Sann, och ställ in villkoret för att räknaren ska ökas endast under förutsättning att checkFlag värdet är falsk. Så räknas uppräknaren endast en gång: när en bild laddas för första gången.
  timer = setInterval (funktion () om (räknare & gt; = checkFlag.length) clearInterval (timer); options.ondone (); return; för (i = 0; i & lt; images.length; i ++) if (images [i] .complete == true) om (checkFlag [i] == false) checkFlag [i] = true; options.oneachload (bilder [i]); counter ++; delaySum = delaySum + options. fördröjning; $ (bilder [i]). css ("synlighet", "synlig") .fördröjning (delaySum) .animate (opacity: 1, options.fadein, function () $ ) .removeClass ("preloader"););, options.check_timer);
  Observera att vi kallar ondone funktion när motflaggan är större än gruppens längd - dvs när alla bilder laddas. När räknaren ökas, oneachload kallas med den aktuella bilden som passerat som parameter.
 
  Steg 8: Den enkla delen 
 Slutligen, i detta steg kallar vi i det(); funktionen i slutet av plugin. 
  i det(); // heter på den sista raden av plugin
 Det är allt; Vi har gjort ett fullt fungerande preloading plugin, och storleken är mindre än 2kb. Fortfarande kvarstår ett problem: laddningsikonbilden laddas slumpmässigt. Vi vill inte ha det. I nästa avsnitt tar vi hand om det.
 
  Steg 9: Att gå på Extra Mile 
  För att åtgärda problemet som nämns ovan laddar vi först ikonen och ringer sedan på i det fungera. Men ikonen för laddning är en bakgrundsbild, så vi injicerar den som en bild på sidan, samtidigt som den hålls gömd. När det laddas kallar vi i det fungera. Vi förslår i princip själva ikonen. 
  varikon = jQuery ("", id: 'loadicon', src: 'css / i / 89.gif'). hide (). appendTo (" body "); timer = setInterval (funktion () om (ikon [0] == true) clearInterval (timer); init (); icon.remove (); return;, 100);
 Först skapar vi ett bildobjekt med en id av loadingicon, och a källa pekar på ladden för laddningsikonen. Sedan lägger vi till det kropp och göm det först. Slutligen ställer vi in intervallet för att kontrollera om ikonen har laddats eller inte. Om det har det, dödar vi timern och börjar förinställa bilderna. Glöm inte att ta bort den ikonen också! 
 
 Slutsats
 Med det sista steget är vi färdiga! Denna funktionalitet fungerar i alla webbläsare, precis som förväntat, och försämras graciöst. Var noga med att ställa in förinstanselementet visa egendom till blockera eller inline-blocket. Det är nu klart att användas i dina projekt. Tack för att du läser!



		
			
	   
	




Koda